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: memberh...@webstandardsgroup.org
> *******************************************************************
> 



*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************

Reply via email to