Why are my floats not clearing in Firefox

liunx

Guest
Hi

Could someone explain to me why my floats are not clearing at <!-- m --><a class="postlink" href="http://www.sussexfind.co.uk/test/">http://www.sussexfind.co.uk/test/</a><!-- m -->

I added a div class at the end of the header div called <div class="clr"> but this does not seem to clear the div in FF.

I tried Pauls technique of adding overflow:auto; to the header div but when viewed in IE5 the grey bar at the top does not butt up with the right hand side of the page, <!-- m --><a class="postlink" href="http://www.sussexfind.co.uk/test/index-IE5.htm">http://www.sussexfind.co.uk/test/index-IE5.htm</a><!-- m -->

I would prefer to use this technique but need assistance in fixing the IE5 problem.!

Thanks for any help!Move the clearing div 'up':
<!-- Header -->
<div id="header">
<div id="logo">logo</div>
<div id="navcontainer">
Last update: 15.03 05, 12:18pm
</div>
<div class="clr"></div>
</div>
<!-- End Header -->

and add border-bottom:1px solid transparent; to #headerThanks, but why do I have to put border-bottom:1px solid transparent;?

Also do you know why I am having the problem with the grey div in IE5 when I use overflow:auto in the header?

Thanks again for your help!!#header has nothing to calculate it's height with.
By adding a border, the #header has something to calculate the height to.
If you had used 'real' content the problem would probably not occur.
Write the html first then apply the css!
EDIT:
In IE5 the overflow:auto reserves space for the scrollbar - the grey gap to the right of #navcontainer
 
Back
Top