First:
The use a Div with only an list inside, it's not necessary.
Use directely the <ul> to do all you want with CSS.
divless!
Thanks for semantic Web
Bechara
-----Mensagem Original-----
From: Stevio
Sent: Thursday, July 15, 2010 12:11 PM
To: Web Standards Group
Subject: [WSG] Overflow hidden and floated divs
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]
*******************************************************************
