Using overflow:hidden is the standard method of clearing floated objects. It'll even work on the ul directly. Sometimes IEv6 requires a width to be stated, but it doesn't have to be fixed.
<ul style="width:100%; overflow:hidden; background:#000; color:#fff"> <li floated /> <li floated /> <li floated /> </ul> Note height is no longer needed. Which allows the user to increase text size while retaining some element of design. Even works in IEv6. Mike Foskett http://websemantics.co.uk/ -----Original Message----- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Stevio Sent: 15 July 2010 16:12 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: memberh...@webstandardsgroup.org ******************************************************************* This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
