Re: [WSG] Overflow hidden and floated divs

2010-07-18 Thread Oliver Boermans
Hi Stevio

On 16 July 2010 00:41, Stevio redea...@freeuk.com 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
***



[WSG] Overflow hidden and floated divs

2010-07-15 Thread Stevio
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
***



Re: [WSG] Overflow hidden and floated divs

2010-07-15 Thread Luc
 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
***



Re: [WSG] Overflow hidden and floated divs

2010-07-15 Thread Jody Tate
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 ;) -
 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
 ***
 



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

2010-07-15 Thread Foskett, Mike
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
***