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]
*******************************************************************
