Interesting. I wish I understood why 'overflow: hidden' solves the problem. I don't like adding things that I don't fully understand. What overflow am I hiding? Why is 'overflow: hidden' the magic that states, "these children belong to the enclosing div". It just seems awful obtuse to me.
Curiously, I also found that adding "float: left;" to #bottomrow also solved the problem. I took that out though and used "overflow: hidden" and it seems to work fine in IE6, IE7, and FF3b5. Thanks Jim and David. Jim Nannery wrote: > Afternoon all > > >> Jeff Blaine wrote: >>> Basic test case: http://www.kickflop.net/div-problem.html >>> >>> >>> >>> Any suggestions would be great. >>> > > David L wrote >> >> >> #bottomrow { overflow:hidden;/*add to sector*/} >> >> >> html >> >> wrap the line "inside bottomrow div. Notice bot1 bot2 and bot3 are not >> inside this bordered box!" in an empty division (no css needed) like so: >> >> <div> >> inside bottomrow div. Notice bot1 bot2 and bot3 are not inside this >> bordered box! >> </div> >> >> And validate. >> >> > > In addition to David's suggestion you can use _overflow:auto_ and get > the same results in firefox and IE7. That however leaves IE 6 with the > bot1 bot2 bot3 sitting on the bottom border in the bottomrow div with no > space below them. > > In your test case, try moving your _ <div class="clear"></div> _ to > just inside the bottomrow div (below bot3 and before the closing </div>) > > <div id="bot3"> > bot3 is here! > </div> > > <div class="clear"></div> > > </div><!-- bottomrow --> > > IE 6 will open up and behave like FF and IE7. > > Best > > Jim Nannery > www.gotbeebar.com > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
