Jon Hughes wrote:
> I'm sure most of us have run into this problem before, but I couldn't
> find the solution of google.
>
> You have a container div, with multiple divs nested inside... but all of
> the child divs are floating, so the contain div doesn't have layout.
> (though this is not the hasLayout bug)
>
> So, the easy solution:
>
> <br style="clear:both;" /> right before closing the container div.
>
> Code:
> <div id="container">
> <div style="float:left">Floating Left</div>
> <div style="float:right">Floating Right</div>
> <!-- At this moment, "container" doesn't know how tall it is, because
> the two floats don't have layout) -->
> <br style="clear:both;" /> <!-- This clears the two floats, thus giving
> "container" layout -->
> </div><!-- end container -->
>
> Does anyone know of an unobtrusive way to do the same thing without
> using the br/?
>
> Thank You,
> - Jon Hughes
Hi John
Correcting some of what you have stated. Floats do have hasLayout and are the
only elements in the above code with haslayout. The container doesn't have a
defined height so without a clearing element, it would not be visibly rendered
(since it takes up no space). A clearing element, causes the container to
contain the float or floats being cleared and the clearing element itself. If
you want to contain the two floats for all modern browsers apart from IE6 is
with the overflow property.
#container {overflow:hidden;}
All good browsers (I believe) will use this correctly and contains the floats
within the padding edge of the container (as the specs state). In IE7 though,
hasLayout will be triggered, thus auto containing the floats. IE6 will need
it's own hasLayout trigger. Some recent thinking on clearing floats can be seen
here.
<http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/>
and hasLayout.
<http://www.satzansatz.de/cssd/onhavinglayout.html>
Kind Regards, Alan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
