Good afternoon Stevio,
It was foretold that
on 15/07/2010 @ 16:11:50 GMT+0100 (which was 12:11:50 where I live)
Stevio would write:
<snipped a bit>
S> However, if I add "overflow:hidden;" to the parent div, then the rightmost
S> list item still jumps down, but now the box expands down the way, so it
S> looks a lot better.
S> My question is why does it do this? I have looked up what overflow hidden is
S> meant to do and from what I read it sounds like the content should just get
S> clipped at the right hand side and not be shown. Why is it causing the box
S> to expand down the way?
Because a float is removed from the flow. When you float a child,
the parents’ height collapses to 0 unless you set a height or clear
the float. The floats float out of the container. To
make the parent encompass the float (e.g. when you want the parents
background colour to extend) then you need to clear the float so that
the parent encopasses the float. There are several ways to do that but
the latest technique is to use the overflow:hidden technique (for
other techniques, google 'containing floats'). This
technique creates a new block formatting context [1] and forces the parent
to acknowledge the floated children.
Overflow:hidden will not work in IE6 but for that old beast you just
have to give the parent "haslayout" [2] which can easily be tripped by
supplying a dimension.
[1] http://www.w3.org/TR/CSS2/visuren.html#block-formatting
[2] http://reference.sitepoint.com/css/haslayout
--
Regards,
Luc
_________________________
http://www.dzinelabs.com
Using the best e-mail client: The Bat! version 4.2.6 with
Windows XP (build 2600), version
5.1 Service Pack 3 and
using the best browser: Opera.
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
