CODEWITHSUNDEEP
cssbackgroundcss-float
user2327201
user2327201

Reputation: 409

CSS wrapper background not appearing

I have a structure like so

<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>

My contentWrapper class has this style:

.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
}

but the background color and border do not appear.

My left_side and right_side class has this as styleing:

.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}

.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}

If I turn off the float on either the left side or right side, but background and border appear..How do I fix this, I really need to background and border around both left and right side.

Thanks, J

Upvotes: 0

Views: 337

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

The class names in the css are wrong. In the html they're called left_side and right_side, while in the css you have right_column and left_column.

Fiddle

.contentWrapper {
    margin: 0px auto;
    padding: 0px;
    width: 990px;
    text-align: left;
    background-color: #FFF;
    box-shadow: 0 2px 7px rgba(0,0,0,0.25);
    position: relative;
    z-index: 20;
    overflow: hidden; /* THIS /*
}

This will clear the float and basically fixing it. When you float an element it jumps out of the normal layer, causing the parent to behave as there was nothing inside it.

Upvotes: 2

Related Questions