CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Background color not working in a wrapper

for some reason I can't get my class blueback working (background remains desperately white), would you know why? Thanks http://jsfiddle.net/wWLz4/

<div class="wrap980px blueback clear">
<div id="block-left">
<h2>dfd</h2>
</div> <!-- End DIV block-left -->

<div id="block-right">
jhjh
</div> <!-- End DIV bloack-right --> 
</div>  <!-- End DIV 980pxWrap -->

CSS

.wrap980px {
    margin: auto;
    width: 980px;
}

.blueback {
    background: #006DB8;
}

#block-left {
    float: left;
    padding: 10px;
    width: 470px;
}
#block-right {
    float: right;
    padding: 10px;
    width: 470px;
}
.clear:after {
    clear: both;
}

Upvotes: 0

Views: 79

Answers (4)

user2854865
user2854865

Reputation: 65

Use:

<div class="wrap980px blueback">
<div id="block-left">
<h2>dfd</h2>
</div> <!-- End DIV block-left -->

<div id="block-right clear">
jhjh
</div> <!-- End DIV bloack-right --> 
</div>

Or use alternativly:

.wrap980px{ overflow:hidden}

Upvotes: 0

Love Trivedi
Love Trivedi

Reputation: 4046

Try This

.wrap980px {
    margin: auto;
    width: 980px;
    overflow:auto;
}

Or

.wrap980px {
        margin: auto;
        width: 980px;
        float:left;
    }

Upvotes: 1

Oleg
Oleg

Reputation: 9359

Or, alternatively, add:

.wrap980px {
    overflow: hidden;
    ...

There are two floated elements within the container <div>, so it effectively has a height of zero. You can add a fixed height, as has already been suggested, or use the oveflow: hidden; trick.

Upvotes: 2

norbert
norbert

Reputation: 525

Define height of wrap980px. For now its 0. Example:

.wrap980px {
    margin: auto;
    width: 980px;
    height: 150px;

}

http://jsfiddle.net/wWLz4/1/

Upvotes: 0

Related Questions