Having to specify width with floats

HTML & CSS
1

I have this code:


.div_left {
float:left;
width:700px;
margin-right:20px;
}

.div_right {
margin-left:720px;
min-height:20px;
overflow:hidden;

* html .div_right {
height:20px;
overflow:visible;
}

I apply it like so:


<div class="div_left">content here</div>
<div class="div_right">content there</div>

In IE and Firefox the right div works just fine, it auto fills out the rest of the space to the right, but in browsers like Chrome I have to specify a width in the div_right property otherwise everything in the div_right just disappears. Any ideas what I’m doing wrong?

2

Hi,

Elements with overflow other than visible are special and need to control their boundaries exactly and take account of floated children (which is why we use it for clearing floats).

When you apply overflow (other than visible) that element will form a rectangular box to the side of floated elements and will not wrap around it and margins may not slide under the floated element as before.

Therefore the solution to your problem is simply to remove the margin-left.


.div_left {
    float:left;
    width:700px;
    margin-right:20px;
    background:red;
}
.div_right {
   [B] min-height:20px;
    overflow:hidden;[/B]
    background:blue;
}
* html .div_right {
    height:20px;
    overflow:visible;
}

IE6/7 don’t have this same behaviour with overflow but they do exhibit exactly the same behaviour when the element has “haslayout” which is what the min-height and the height:10px hacks are doing.

If you remove the haslayout and the overflow as you have done then the element should line up correctly also but you will lose the block containment in the right column and if you have an floats in the right column that you clear you will also clear the whole left column.

Therefore you would need to nest an inner element in that right column that is floated and 100% wide to stop this from happening and to ensure that the content sits in an element with haslayout also.

Taking that all into account the original overflow method is more succinct but will have a different behavior when the screen is sqeezed smaller as the right column will eventually drop and move under the left column - whcih in most cases is what you want. Using the margin-left method the right column will still drop in IE but will stay to the right and look a bit odd.

3

Thanks for looking! Yeah I realized that but when I fixed it still same issue. But I got it to work by removing the min-height and overflow hidden from div_right property. After I removed that everything worked for all browsers.

4

It appears to be working for me in firefox and chrome, however, if that is your code directly pasted, you seem to have missed a closing } for the .div_right if i’m not mistaken.