Forum Moderators: not2easy
I have a 2 column layout - the container is 750px wide, the left column is 200px and right is 550px. There are no other fixed widths. Recently I tried adding some shadows to my paragraph blocks in the right column as follows:
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<p>some text here</p>
</div>
</div>
</div>.shadow1 {
width: 100%;
float:left;
background: url(img/shadowAlpha.png) no-repeat bottom right!important;
background: url(img/shadow.gif) no-repeat bottom right;
margin: 10px 0 15px 10px!important;
margin: 10px 0 15px 5px;
}
.shadow1 .shadow2 {
background: none!important;
background: url(shadow2.gif) no-repeat left top;
padding: 0!important;
padding: 0 6px 6px 0;
}
.shadow1 .shadow3 {
color: #777;
background-color: #fff;
border: 1px solid #AAAAAA;
margin: -6px 6px 6px -6px!important;
margin: 0;
}
Everything seems to be fine in firefox, but in IE the right column drops down below the left column. I know that this means that the 2 columns aren't fitting in the 750px, but when I expand the container width so that both columns fit, some of the background images start repeating. I'm assume that the 3 shadow classes are adding width to the paragraph block, but I can't wrap my head around exactly how to fix this problem.
Any help would be appreciated.
The fix? Remove the width:100% from .shadow1. It shouldn’t be needed as block level elements automatically expand horizontally to fill their containers.