Re: [WSG] Overflow hidden and floated divs
Hi Stevio On 16 July 2010 00:41, Stevio wrote: > 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? Most basically overflow has a different effect depending on whether dimensions are set or not. In your case you are not setting the height on the same element that has the overflow set. If you want overflow;hidden to clip the non fitting li try either moving the height to the div or the overflow to the ul. Cheers Ollie -- @ollicle *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Overflow hidden and floated divs
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.
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 ;) -
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
***
Re: [WSG] Overflow hidden and floated divs
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 ;) -
>
>
>
>
>
>
>
>
> 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
***
Re: [WSG] Overflow hidden and floated divs
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: 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 ***
Re: [WSG] Overflow hidden and floated divs
First:
The use a Div with only an list inside, it's not necessary.
Use directely the 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 ;) -
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
***
[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 ;) -
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
***
