I am currently working with a layout that looks like this:
<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>
The contentWrapper class is styled as follows:
.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;
}
However, I am experiencing issues with the background color and border not appearing.
The left_side and right_side classes have the following styling:
.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}
.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}
When I remove the float property from either the left side or right side, the background and border appear. How can I resolve this issue and have the background and border around both the left and right side?
Thank you, J