CSS - Top Nav Bar - Image On Left, Ul On Right - Cant Seem To Line Up Both??

This may be a stupid question, but is there an easy way to make a div have an image on the left and content on the right... BUT then also make sure that, if the image's height is larger than the div, the div still covers the bottom. I know you can use a "float killer" div, however if I want a float killer on EVERY div class of this type, is there some easy way to tell the css to ALWAYS include code at the bottom?

Also what method would a good coder use to vertically align the content on the right so that there isn't a lot of empty space?

Thanks

Hi there!

I'm trying to place an image that tiles on the left far side of the background and on the right hand side. This is so it will have columns down the sides. I'm not sure how to begin to do this... I know I could do with this tables, but I'm trying to do this without tables and pure CSS.

Any thoughts? I wish I had an example to show....

Thanks!

Nathan

I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other.

In safari it looks fine right now.

http://www.ryanbuckley.ca/photos/

Can anyone help with this little annoyance?

Thanks in advance!
Ryan

Hi

I'm trying to figure out how to postion an Image at the bottom left of a <DIV> container.

Can someone supply an example style class defintion which will place an Image at the bottom left of the div container..

I presently have:

<div>
<h2>Heading 2</h2>
<p>My paragraph text goes here and goes on for a line or so</p>
<img class="bottomleft" src="button.gif" alt="button" />
</div>

.bottomleft {
position: relative;
bottom: 0px
left: 0px
}

But this places the Image relative to the end of the <p> tag not relative to the <div>

How can I position the Image relative to the botom left of <div> tag?

Thanks
David

I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left.

Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right.

Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this.

html code

Code:

<div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div>

css tags:
Code:

.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(../images/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}

.headerbartext {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-left:15px;
  line-height: 140%;}

.headerbartextright {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-right:15px;
  line-height: 140%;}

Hello,

I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div.

I have tried a couple of things, here is the page I'm working on and this is the css file

This hasn't been tested on Windows, so I have no idea how it looks.
It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack.

The current setup of the page is this:

HTML: Code:

<div id="content">
	<div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div>
	
	<div class="image1">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis 
		parturient montes, nascetur ridiculus mus.</p>
	</div>
	<div class="image2">
		<img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede 
		diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p>
	</div>
		
	<div class="another3">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient 
		montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla 
		consectetuer.</p>
	</div>

CSS: Code:

img.left {
	float: left;
	border: solid 1px black;
	padding: 10px;
	margin-right:10px;
	margin: bottom: 10px;
}

img.right {
	float: right;
	border: solid 1px black;
	padding: 10px;
	margin-left:10px;
}

.image1 {
	border: red 1px solid;
	padding : 0px;
}
.image2 {
	border: orange 1px solid;
	padding : 0px;
}
.image3 {
	border: blue 1px solid;
	padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.another {display: inline-table;}

/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */

/* .clearer {
	clear: both;
} */

p.red {
	color: red;
}
p.orange {
	color: orange;
}
p.blue {
	color: blue;
}

Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either.

Is there a solution?

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

http://www.ilumos.co.uk/site/

http://www.ilumos.co.uk/site/style/styleDefault.css

As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there.

the CSS for the page border on the left is as follows:

#wrap {
background: url("../images/ilumosPageFadeLeft.jpg") repeat-y;
padding-left: 25px;
width: 750px;
}

(the wrap div contains all of the page's content)

How can I make the image extend to the bottom of the page?


Thanks

I would like to align left images so that they touch against each other.
Here is a capture of my problem.
dollhedz.com/test

[CODE]
<style type="text/css">

body{
background-color:#000033;
color:#00cc33;

}


#wrapper{
background-color:#000000;
margin:15px auto 0px;
width:700px;
height:800px;
}



#sitenav{
background-image:url(sitegrax/sitenavback.jpg);
background-repeat: no-repeat;
height:55px;
padding-left:213px;
border: 0px;
margin:0px;
text-align:left;
}

#one{
float:left;
text-align:left;
align:left;
margin:0px;
padding:0px;
}




</style>
</head>

<body>

<div id="wrapper">

<div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" />
</div>

<div id="sitenav" >
<div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a>
<a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a>
<a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div>
</div>

</div>

</body>
</code>

Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image.

thank you for your time

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;


}

Hi everyone,

I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..)
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE   The text goes here
PICTUREHERE
PICTUREHERE

So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens:
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE  The text goes here, but when it's longer
PICTUREHERE
PICTUREHERE
the remainder comes here

I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell:
Code:

PICTUREHERE   The text goes here, but when it's longer
PICTUREHERE   the remainder comes here
PICTUREHERE
PICTUREHERE
PICTUREHERE

Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face)

Thank you in advance
Andy

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.).

Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left".

What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it?

I am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css


PHP Code:
 h2 {border-top:1px solid #4D65A0} 







I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in.

new line: slash_blue_mw.gif

sorry posted in the wrong spot b4

The physical appearance and layout has already been determinted.

I must now make it into a webpage that looks like the design. I know how to do it with tables but I am trying todo it tableless and I am having some problems - because this is my first attempt at it - yes I know I am old school - but I am trying to become new school.

Here is the link to the design

I have the box for the web page and trying to get the logo image to show up properly in the top right corner and the tag line to show up next to it.

I don't know how to do the code box thing - but here is my

html:

<body>
<div id="page">
<div id="header"></div>
<div id="tagline">world leaders in spirometry</div>


</div>
</body>

Here is my css:

body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
background-color: #ffffff;
color: #000000;
margin-top: 11px;
padding: 0;
}

/*page settings*/

#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
color: inherit;
text-align: left;
overflow: hidden;
margin: 0 auto;
padding: 10px 10px 10px 10px;
align: center;
}

#header {
background-image: url(../images/vitalograph_spirometers_logo.gif);
background-color: inherit;
background-position: "top left";
background-attachment: fixed;
background-repeat: no-repeat;
padding: 10px 10px 10px 10px;
overflow: inherit;
}

#tagline {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
color: #5094F9;
display: inline;

}

Any help is greatly appreciated - and if you could tell me how to do the code ting properly that woud be great - I tried the wrap code # icon, but it only pasted one tag not the whole string.

Thanks!

I have tried embedding the div tags with no luck and even having the text be defined in the heading id and trying to define it there - but it still doesn't look right.

Here is my code: