This is more of a request for an explanation as to help solving a

Question

0

Asked: May 25, 20262026-05-25T06:42:57+00:00 2026-05-25T06:42:57+00:00

This is more of a request for an explanation as to help solving a

0

This is more of a request for an explanation as to help solving a problem… in setting up the layout for a site, I had been setting the background colours of all of my div’s so that I could see where each one was being displayed, etc.. just for getting the basic shell setup.

I noticed at one point however that although the content in my footer div displayed in the right spot, the background colour was displaying much higher than it and was displaying behind some boxed content that appears above the footer. The background colour of my ‘boxes’ div, which contained 3 horizontal boxes, was not displaying at all, and the footer colour was showing where the boxes colour should have. I had always thought that since I hadn’t specified a height for boxes, it would stretch to the height of the 3 horizontal boxes which were placed inside it….but apparently this isn’t the case. As soon as I set my ‘boxes’ div to have a height the same as the horizontal boxes, the colour showed up properly and pushed the footer down to the correct place.

Can someone please explain to me why this happens? And why I had to specify the height of ‘boxes’ in order for the background colour for it to be displayed, and why it didn’t just stretch to the height of the horizontal boxes contained within it?

Here are some jsFiddle links to see the differences (I’ve also include the actual code below as well if useful). Note that the ‘boxes’ background colour I want to see is black..footer is red.

Without height specified and footer (red) coming up too high: http://jsfiddle.net/KgFKH/

With height specified and displaying properly: http://jsfiddle.net/eD4d7/

I apologize if its a stupid question, I had just always thought that the container div would stretch to the height of the elements within it…so I am finding this very puzzling!

html:

<!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">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</head>


<body>


    <div id="header-stretch">
        <div id="header" class="container">
            <h2>THIS IS THE HEADER</h2> 
            <p>nav<br />will<br />go</br >here
        </div><!--header-->
    </div><!--header stretch-->

    <div id="slider-stretch">
        <div id="slider" class="container">
            <p>Slider will go here...</p>
        </div><!--slider-->
    </div><!--slider stretch -->

    <div id="main-stretch">
        <div id="main" class="container">
            <p>Main block of content will be in here.</p>
        </div><!--main container-->
    </div><!--main stretch-->

    <div id="boxes-stretch">
    <div id="boxes" class="container">
        <div class="box" id="box1">
            <h2>Box 1 Heading</h2>
            <p>Box 1 content here...</p>
            <p class="c2action"><a href="#">learn more</a></p>
        </div><!--box1-->

        <div class="box" id="box2">
            <h2>Box 2 Heading</h2>
            <p>Box 2 <br />content here...</p>
            <p class="c2action"><a href="#">learn more</a></p>
        </div><!--box2-->

        <div class="box" id="box3">
            <h2>Box 3 Heading</h2>
            <p>Box 3<br /> content <br />here...</p>
            <p class="c2action"><a href="#">Click here for Map &amp; Directions</a></p>
        </div><!--box3-->
    </div><!--boxes-->
    </div><!--boxes-stretch-->

    <div id="footer-stretch">
        <div id="footer" class="container">
            <p>&copy; Footer</p>
        </div><!--footer-->
    </div><!--footer stretch-->

</body>

css (w/o height declared):

html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, font, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-size: 100%;  
    vertical-align: baseline;  
    background: transparent;  
}  

body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}

.container {margin: 0 auto; width: 940px;}

#header-stretch{background:#ffff00;}

#header {overflow: hidden; padding-bottom: 10px;}

#header h1 a {
    background: url("images/logo.gif") no-repeat;
    float: left;
    height: 37px;
    width: 191px;
    margin-top: 40px;
    text-indent: -9999px;
}

#header ul{
    float: right;
    list-style: none;
    margin-top: 50px;
}

#header ul li{
    float: left;
    margin-left: 10px;
    padding: 10px 0 10px 12px;
}

#header ul li a {
    text-decoration: none;
    font-size: 17px;
    padding: 10px 0px 10px 2px;
    color:#878686;
}

#slider-stretch{
    background-color:#9900ff;
}

#slider{
    background-color:#00FF00;
    height: 260px;
}

#main-stretch{
    background-color:#3c0303;
    height: 170px;
}

#main{
    padding:15px 0px;
}

#main p{
    padding-top:15px;
    color:#FFFFFF;
}

#boxes-stretch{
    background-color:#0000FF;

}

#boxes{
    margin-top: 20px;
    background-color:#000000;

}

.box{
    position:relative;
    width:296px;
    height:270px;
    float:left;
    background-color:#999999;

}

.box h2{
    font-size: 16px;
    margin-top: 18px;
    margin-left: 24px;
    color: #353535; 
}

.box img{
    margin-top: 10px;
    margin-left: 24px;
}

.box p{
    margin-top: 10px;
    margin-left: 24px;
    width: 252px;
    font-size:13px;
    color:#525151;
}

p.c2action{
    position:absolute;
    bottom:10px;
    text-align:right;
    font-size: 14px;
}

.c2action a{
    color:#353535;
}


#box1{  
    margin-right: 20px;
}

#box2{
    margin-right: 20px;
}


#footer-stretch{
    background-color:#ff0000;
}

#footer{
    padding-top:10px;
    padding-bottom:10px;
    font-size: 11px;
    color:#7e7e7e;
    overflow:hidden;
}

#footer p {
    text-align: center;
}

css (w/ height declared):

html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, font, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-size: 100%;  
    vertical-align: baseline;  
    background: transparent;  
}  

body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}

.container {margin: 0 auto; width: 940px;}

#header-stretch{background:#ffff00;}

#header {overflow: hidden; padding-bottom: 10px;}

#header h1 a {
    background: url("images/logo.gif") no-repeat;
    float: left;
    height: 37px;
    width: 191px;
    margin-top: 40px;
    text-indent: -9999px;
}

#header ul{
    float: right;
    list-style: none;
    margin-top: 50px;
}

#header ul li{
    float: left;
    margin-left: 10px;
    padding: 10px 0 10px 12px;
}

#header ul li a {
    text-decoration: none;
    font-size: 17px;
    padding: 10px 0px 10px 2px;
    color:#878686;
}

#slider-stretch{
    background-color:#9900ff;
}

#slider{
    background-color:#00FF00;
    height: 260px;
}

#main-stretch{
    background-color:#3c0303;
    height: 170px;
}

#main{
    padding:15px 0px;
}

#main p{
    padding-top:15px;
    color:#FFFFFF;
}

#boxes-stretch{
    background-color:#0000FF;

}

#boxes{
    margin-top: 20px;
    background-color:#000000;
    height:270px;
}

.box{
    position:relative;
    width:296px;
    height:270px;
    float:left;
    background-color:#999999;

}

.box h2{
    font-size: 16px;
    margin-top: 18px;
    margin-left: 24px;
    color: #353535; 
}

.box img{
    margin-top: 10px;
    margin-left: 24px;
}

.box p{
    margin-top: 10px;
    margin-left: 24px;
    width: 252px;
    font-size:13px;
    color:#525151;
}

p.c2action{
    position:absolute;
    bottom:10px;
    text-align:right;
    font-size: 14px;
}

.c2action a{
    color:#353535;
}


#box1{  
    margin-right: 20px;
}

#box2{
    margin-right: 20px;
}


#footer-stretch{
    background-color:#ff0000;
}

#footer{
    padding-top:10px;
    padding-bottom:10px;
    font-size: 11px;
    color:#7e7e7e;
    overflow:hidden;
}

#footer p {
    text-align: center;
}

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-25T06:42:58+00:00

Editorial Team

2026-05-25T06:42:58+00:00Added an answer on May 25, 2026 at 6:42 am

You’re not containing (or clearing) the floated boxes. There are a number of methods to do so, one way is to use overflow: hidden on the container that holds to floats (do not also set an explicit height on this container):

http://jsfiddle.net/KgFKH/1/

You could also add an empty div below the floats that has clear; both.

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

This is more of a request for an explanation as to help solving a

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply