Home/ Questions/Q 8234245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T18:24:41+00:00

Look at the html and css below. I have set the width of the

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0