Click to See Complete Forum and Search --> : Stretch Header in Fluid Layout w/ 2 Images


twac-co
12-13-2007, 02:06 AM
In my site header, I want to have a logo on the left, and a banner on the right (using 2 images). The CSS allows for a fluid layout and I want the images to remain on the left and right no matter how the page is resized.

#header {
padding: .5em;
min-width: 800px;
}
#header h1 {
padding: 0;
margin: 0;
}
#logo {
float: left;
}
#banner {
float: right;
}


That coding in the CSS produces the desired effect, but the rest of the page content is behind the header instead of under it. I'm sure I'm just missing something simple. Any ideas??

Thanks much!

Centauri
12-13-2007, 06:05 AM
Floating elements takes them out of the document flow, and the #header div will then collapse to zero height. Setting the overflow property will force the header to surround the floats :#header {
padding: .5em;
min-width: 800px;
overflow: hidden;
}

twac-co
12-14-2007, 01:18 AM
Thanks.

In hindsite, I knew that. I guess it was just too early in the morning (or too late at night! :eek:

ray326
12-15-2007, 11:31 PM
Normally one side would be an img and the other would be a background.