I asked a similar question back in February and this link helped explain it:
http://www.quirksmode.org/css/clearing.html -jody On Jul 15, 2010, at 8:11 AM, Stevio wrote: > I have a row of floated list items inside a container with height 1.2em, > which is inside a parent div with a background colour. > > e.g. something like this (not the actual HTML of course ;) - > <div with background colour> > <ul with height 1.2em> > <li floated></li> > <li floated></li> > <li floated></li> > </ul> > </div> > > If the floated list items were too wide, the rightmost list item jumped down > beneath, but the container did not expand so it looked bad. > > However, if I add "overflow:hidden;" to the parent div, then the rightmost > list item still jumps down, but now the box expands down the way, so it > looks a lot better. > > My question is why does it do this? I have looked up what overflow hidden is > meant to do and from what I read it sounds like the content should just get > clipped at the right hand side and not be shown. Why is it causing the box > to expand down the way? > > Thanks. > > Here is the CSS: > > #navigationbar { > background-color:#DEDEDE; > overflow:hidden; > } > #navigationbar ul { > padding: 0.2em 0 0.2em 0; > margin: 0px; > list-style: none; > height:1.2em; > } > #navigationbar ul li { > padding: 0; > margin: 0; > display: block; > float: left; > } > > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [email protected] > ******************************************************************* > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [email protected] *******************************************************************
