CODEWITHSUNDEEP
csshtml
Sahil
Sahil

Reputation: 43

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

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>

Upvotes: 3

Views: 11489

Answers (3)

Jeemusu
Jeemusu

Reputation: 10533

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.

Upvotes: 3

U.P
U.P

Reputation: 7442

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

Upvotes: 0

Narendra
Narendra

Reputation: 3117

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.

Upvotes: 0

Related Questions