Forum Moderators: not2easy

Message Too Old, No Replies

Having difficulty with block width

         

sodani

3:14 am on May 4, 2007 (gmt 0)

10+ Year Member



First off, my doctype is xhtml 1.1.

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.

Robin_reala

6:43 am on May 4, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You’re setting a width:100% on .shadow1 but then adding extra margins pushing the whole thing bigger than the container it sits in. Most browsers will just let the block overflow out of the container, but IE6 and under (being helpful) will expand the container to fit. This is wrong, and will make the whole thing too wide for the layout causing it to drop down.

The fix? Remove the width:100% from .shadow1. It shouldn’t be needed as block level elements automatically expand horizontally to fill their containers.

Xapti

11:15 pm on May 4, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



^ Yep.
Except that's not the case when it's a float.
Since I don't know why that float is there, just get rid of the float too.
Why was the float there?