Re: [css-d] Why the extra vertical space?

2006-07-07 Thread Zoe M. Gillenwater
Michael Landis wrote:
 On 7/6/06, Rick Pasotto [EMAIL PROTECTED] wrote:
   
 http://charlottetoastmasters.info/leaders2.php

 These are nested DLs. (I'm using DLs because there is a possibility of
 additional info for each governor -- phone, quote, picture, etc.)

 As far as I can see the code for the two sections is identical yet the
 first has additional white space above the inner DL. Why?
 

 Hi, Rick,

 Because each div within the lists have clear:both, they are clearing
 the left navigation.

 The reason this is happening is that clearing impacts everything
 within the same block formatting context.[1] So as long as the stuff
 inside content area is in the same context as the floated element, the
 float will be impacted by any clearing done there.[2]
   

Rick,

I just wrote a free article for Community MX that covers the block 
formatting context:
http://www.communitymx.com/content/article.cfm?cid=6BC9D

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Why the extra vertical space?

2006-07-06 Thread Michael Landis
On 7/6/06, Rick Pasotto [EMAIL PROTECTED] wrote:
 http://charlottetoastmasters.info/leaders2.php

 These are nested DLs. (I'm using DLs because there is a possibility of
 additional info for each governor -- phone, quote, picture, etc.)

 As far as I can see the code for the two sections is identical yet the
 first has additional white space above the inner DL. Why?

Hi, Rick,

Because each div within the lists have clear:both, they are clearing
the left navigation.

The reason this is happening is that clearing impacts everything
within the same block formatting context.[1] So as long as the stuff
inside content area is in the same context as the floated element, the
float will be impacted by any clearing done there.[2]

To keep the clears from interfering with the floats, you will need to
put them into different formatting contexts. The easiest way to do
this is to put the content area inside a float. Then the clears inside
the float only impact the elements within that float, and don't touch
anything outside. You might want to use one of the standard float
layouts[3] to isolate the floats in one column from the floats in
another.

HTH,

Michael

[1] http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[2] http://www.w3.org/TR/CSS21/visuren.html#flow-control
[3] http://css-discuss.incutio.com/?page=FloatLayouts
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/