Why is background color of #wrapper not showing up behind the left and content columns?

Question

Look at the html and css below. I have set the width of the #wrapper to 990 px and complete width of center columns is 960 px. Margin of 15px is there in both sides. So, wrapper div's background color should be showing up there behind the #left and #content divs. However if i set the height of #wrapper it does show the background. But i want it to be shown as full.

I am just a beginner in CSS layouts.

<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#header{
margin:0 auto;
width:100%;
background:#efffff;
height:100px;
}
#footer{
margin:0 auto;
clear:both;
width:100%;
background:#ccc;
height:100px;
}
#wrapper{
width:990px;
margin:0 auto;
background:#000;
display:block;
}
#left{
margin:0 0 0 15px;
background:#eeffee;
width:200px;
float:left;
}
#content{
margin:0 15px 0 0;
background:#eeeeee;
width:760px;
float:left;
}
</style>
</head>
    <body>
        <div id="header">
            header
        </div>
        <div id="wrapper">
            <div id="left">
                left
            </div>
            <div id="content">
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
            </div>
        </div>

        <div id="footer">
            Footer
        </div>
    </body>
</html>

score 3 · Accepted Answer · edited May 23 '17 at 10:24

Because the Wrapper contains floated elements, you will need to 'clear' these elements, otherwise the wrapper will not wrap around them. There are multiple ways of doing this, however the most accepted way is to use a clearfix class on the wrapper.

Add the following code to your css:

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

Then set the class="clearfix" on the <div id="wrapper"> element. so it will become:

<div id="wrapper" class="clearfix">

This particular solution is known as the micro clearfix hack, more info can be found here: http://nicolasgallagher.com/micro-clearfix-hack/

Here is a jsfiddle to show the result: http://jsfiddle.net/PWQru/1/

Also, take a look at some previous questions that answer the same question. E.G. What methods of ‘clearfix’ can I use?

There is some good discussion in that question about the various methods.

Sahil, i updated my answer a bit, please make sure your using the updated code :) — Jeemusu, Jul 13 '12 at 13:32

score 0 · Answer 2 · answered Jul 13 '12 at 13:20

0

Add height: 100%; to #left .

Resulting style will be

#left 
{
    background: none repeat scroll 0 0 #EEFFEE;
    float: left;
    height: 100%;
    margin: 0 0 0 15px;
    width: 200px;
}

Hope this helps.

answered Jul 13 '12 at 13:20

Narendra

3,069
7
30
51

height:100% will do nothing to a floated element. – Jeemusu Jul 13 '12 at 13:28
I have copied the code provided in the question and tried that myself. It is working. Please tell why height:100% will not work. – Narendra Jul 13 '12 at 13:30
http://jsfiddle.net/zSpfW/1/ <--- Take a look at this, i set height:100%; on the left wrapper, and it does nothing. – Jeemusu Jul 13 '12 at 13:35
@Jeemusu: I checked the jsfiddle provided by you. Its not working. Please try by creating an html file using notepad, by copying the code given in question. Then add height:100% for left and open the file in Mozilla. It will take 1 minute. If you want you can try. But if it is not working I would love to know the reason for not working. – Narendra Jul 13 '12 at 13:42
1

Hey Rain, I made a file and did exactly what you asked and it worked with mixed results. It was fine in IE9, but didn't work in Chrome. As for why, I'm not sure. Still if the element contains floated elements, it should be cleared, and if it is, then there is no need for a height:100%; – Jeemusu Jul 13 '12 at 13:52
I am getting more and more qurious. For me it is working in Mozilla and Chrome but not in IE. My IE version is 8.0. Well let you know if get to know anything. – Narendra Jul 13 '12 at 14:05

score 0 · Answer 3 · answered Jul 13 '12 at 13:22

0

That is because your content and left divs are floated. You will have to introduce a div at the end of both the floated divs to make the wrapper cover these two divs.

<div id="wrapper">
            <div id="left">
                left
            </div>
            <div id="content"></div>   
    <div style="clear:both;"></div>
</div

answered Jul 13 '12 at 13:22

U.P

7,357
7
39
61

This is not the best method of clearing floating elements. While it can still be used, the css i posted in my answer is a much more widely used and browser compatible method. – Jeemusu Jul 13 '12 at 13:24
1

The CSS psedudo contents you used in your solution are not supported by IE6,7 and partially supported by IE8 and FF3.0. – U.P Jul 13 '12 at 13:28

Why is background color of #wrapper not showing up behind the left and content columns?

3 Answers3