css columns float

[rangerkev]

Hey everyone,

I am pretty new to css (and this forum). I am trying to have a bar along the top of my page (with round edges and a gradient) that will adjust based on browser window. There are 3 images, topleft, middle, and top right. I have gotten the topleft and middle images to line up side by side perfectly, but the topright image keeps dropping down. Here is the CSS code:

#topleft {
background-image:url(images/topleft.gif);
background-repeat:no-repeat;
height:72px;
width:28px;
float:left;
}
#middle {
background-image:url(images/middle.gif);
background-repeat:repeat-x;
background-position:right;
height:72px;
width:inherit;
margin-left:28px;
margin-right:28px;
}
#topright{
background-image:url(images/topright.gif);
background-repeat:no-repeat;
width:28px;
height:72px;
float:right;
}

any thoughts? thanks

[s1ntax]

you might be exceeding the width of the container. if your #middle background tiles, try making that the background of the container element and then just put the #topleft and #topright in and float them left and right, respectively.

[rangerkev]

thanks s1ntax that worked.

I was hoping though that I could get the topleft and top right to be all the way left/right justified and have the middle at a left/right margin of 28 px. Any ideas?

[s1ntax]

if you want to have

#left GAP #middle GAP #right

then dont use what i told you :P.
instead put #left #middle and #right into a #container, then figure out the maximum width of what ever the container needs to be and set it to a fixed width. if it is a variable width (%), if the container is smaller than the content floating within it, it will drop down to the next line. im pretty sure there is a way to prevent this but i dont know off the top of my head.

www.w3schools.com/css/ may have the answer

you could always try adding this rule to your css for the #container element



white-space: nowrap;

[rangerkev]

I'll check out the link, thanks a lot for your help.