1 reply to this topic

[iwz]

Ok, i'm using the float property for both headers on my site

Found Here

My problem is that after you shrink the window so much one header drops beneath another.

Any ideas?

[tjl30]

This is because you have your left and right divs with specific widths. So to fix this you must put your widths into % rather than px.

Also left and right % should not be more than the containers % which was 98%, you also have to keep in mind that you have margins which for the left and right side of your #right, so you have to add that to your over all width.

This is what I came up with to keep you site look as close to how you had it, only using %: Left Width 20% + Right Width 75% + Right and Left margins on the Right div 4 = 99%... That is one larger than your container but it seems to still work in IE 7 and FF 2. If however you see the right header jump under the left header then you just have to reduce the Right width a % point.

This of course can be changed a little bit so that the left navigation is a little bigger.

Here is the code of what I changed:

#header {
 width: 100%;
 background: #242424 url('headergrad.jpg') repeat-x bottom;
}
#container {
 margin: 0 auto 0 auto;
 text-align: left;
 width: 98%;
}
#left {
 width: 20%;
 float: left;
}
#right {
 width: 75%;
 margin: 0 2% 0 2%;
 float: left;
}
#left .gradient {
 background: #242424 url('navhead.jpg') repeat-x top left;
 border: 1px solid #000;
 color: #fff;
 font-weight: bold;
 padding-top: 6px;
 padding-left: 4px;
}
#right .gradient {
 background: #242424 url('mainhead.jpg') repeat-x bottom;
 border: 1px solid #000;
 color: #fff;
 font-weight: bold;
 padding-top: 6px;
 padding-left: 4px;
}

Hope that helps, getting CSS to behave can be difficult (especially in older browsers).