2 columns layout problem

HTML & CSS
1

I have a problem with a simple 2 columns layout and I can’t figure out why its happening.

I have 2 columns: middle and right. Right one is floating to the right, middle one isn’t floating. If I put a clearing div inside middle column, for some reason it causes height of middle column to match height of right column.

Here are examples:

code without clearing div, [url=http://www.trushkin.biz/tests/2columns/test1.php]code with clearing div.

That clearing div is inside element that doesn’t have any floating elements, so in theory it shouldn’t affect anything, but it does.

Why is it happening and how do I fix it without removing that clearing div?

2

Why is it happening and how do I fix it without removing that clearing div?

The real question here is why do you want to keep them? There is no reason to need empty clearing divs for float control. Simply setting overflow:hidden on your #wrapper div will contain the child floats.

That clearing div is inside element that doesn’t have any floating elements, so in theory it shouldn’t affect anything, but it does.

The clearing div inside Content WILL clear the floated #column div when set to clear:both or clear:right.

The reason is because both Content and #column are in the same block formatting context. They are both siblings of #wrapper and actually Content is sliding under #column since floats are removed from the page flow.

Take your second test link and make these changes, remove the last clearing div and then set a height and BG color on .clear so you can see what is going on.

By adding a large bottom padding to Content just for visual purposes you will see that your clearing div clears the right float.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-gb" />
<style type="text/css">

#wrapper { 
    width: 800px;
    margin: 0 auto;
    border: solid 1px red;
    padding: 5px;
}

#column {
    float: right;
    background-color: #eee;
    width: 100px;
}
#column>p {
    margin: 0;
    [COLOR=DarkGreen]padding: 20px 5px;[/COLOR]
}

[B]#content[/B] {
    background-color: #ddd;
    [COLOR=DarkGreen]padding-bottom:100px;[/COLOR]
}
#content>p { 
    margin: 0; padding: 0; 
}

[B].clear[/B] { 
[COLOR=DarkGreen]clear: both;
height:10px;
background:red;
}[/COLOR]

</style>
</head>
<body>
[COLOR=Blue]<div id="wrapper">[/COLOR]
    [B]<div id="column">[/B]
        <p>
            This is a right column.
        </p>
    [B]</div>
    <div id="content">[/B]
        <p>
            This is content
        </p>
        [COLOR=Red]<div class="clear"></div>[/COLOR] <!-- why is this div clearing #column? -->
    [B]</div>[/B]
[COLOR=Blue]</div>[/COLOR]
</body>
</html>
3

I think you may find these float clearing test cases helpful. It is a series of different conditions put together by Stomme poes.

http://stommepoes.nl/floaties.html

The condition that you were questioning is the third case in the test

http://stommepoes.nl/floaties3.html

4

Thank you very much!

Problem is that is a small test case, but real code is a part of large website with few blocks in middle that may or may not contain floating elements (and they might be added later via javascript), so at the end of those blocks there is a clearing div just in case. I was hoping to an easy css solution to avoid complicating server side script, which I’m trying to keep as small as possible.

5

but real code is a part of large website with few blocks in middle that may or may not contain floating elements
Ahh I see. I’m not sure how the real page is set up, whether or not it is a fixed width like your test case.

You could set up a new block format by floating the Content div left and setting the available width on it. That will kill the IE6 “3px jog” and allow you to clear elements in that div only. It will also give you the option of bringing the Content before the #column in the source order.

Edit:
You could also set overflow:hidden; on Content in place of the float and width. That will allow it to work as a fluid width container while setting up a new block format. That will give the 3px jog in IE6 though and it would need a haslyout trigger on Content for IE6.
_______

Something like this when floating Content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-gb" />
<title>Test 1</title>
<style type="text/css">

#wrapper {
    overflow:hidden;/*contain floats*/ 
    width: 800px;
    margin: 0 auto;
    padding: 5px;
    border: solid 1px red;
    background:#CCC;
}
p { margin: 0;}

#column {
    float: right;
    background:cyan;
    width: 100px;
}
#column p {padding: 50px 5px;}

#content {
    float:left;/*contain child floats and set new "block format"*/
    width:700px;
    padding-bottom:100px;/*testing*/
    background:#EEF;
}
.flt-lt {
    float:left;
    width:200px;
    height:80px;
    background:lime;
}
.flt-rt {
    float:right;
    width:200px;
    height:80px;
    background:red;
}
.clear {
    clear:both;
    background:yellow;
}
</style>
</head>
<body>

<div id="wrapper">
    <div id="column">
        <p>This is right column.</p>
        <p>This is right column.</p>
    </div>    
    <div id="content">
        <p>This is content</p>
        <p>This is content</p>
        <p class="flt-lt">Left Float</p>
        <p class="clear">Cleared Block</p>
        <p class="flt-rt">Right Float</p>
        <p class="clear">Cleared Block</p>
        <p>Lorem ipsum dolor sit amet consectetuer ornare Quisque sed vel iaculis. Lobortis 
        fames odio justo In sed ultrices sagittis convallis id sagittis. Volutpat Nulla Aenean 
        sagittis at sem enim Donec fermentum risus vel. Semper Vestibulum convallis Quisque 
        auctor Cum Nunc rhoncus nunc leo Donec. Facilisi justo tincidunt Vestibulum sed eros 
        wisi Aenean sit urna vel.</p>
    </div>
</div>

</body>
</html>