2013-07-29 3 views
0

У меня есть структура вроде такCSS обертка фон не появляется

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

Моего класса contentWrapper имеет этот стиль:

.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; 
} 

но цвет фона и границы не отображаются.

Мой left_side и right_side класс имеет это как styleing:

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

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

Если отключить поплавок либо на левой стороне или правой стороне, но фон и границы appear..How сделать это исправить, я действительно необходимо создать фон и огибать как левую, так и правую сторону.

Спасибо, J

+0

Во-первых, это '.left_column' или' .left_side'? – Eray

+0

.contentWrapper должно быть 'position: absolute' – Eray

+0

My Bad, исправлено это ... его left_side – user2327201

ответ

2

Имена классов в CSS являются неправильными. В html они называются left_side и right_side, а в css - right_column и 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 /* 
} 

Это очистит поплавок и в основном ее фиксации. Когда вы плаваете элемент, он выпрыгивает из нормального слоя, заставляя родителя вести себя, поскольку в нем ничего не было.