Question

I have the following:

#sbr {
    float: left;
    min-width: 200px;
    overflow: hidden;
    width: 200px;
}

and

<div id="sbr"></div>

The <div> is currently empty. I want to follow this <div> with another, so the minimum width of my first <div> must be 200px, however it seems not to work. Am I doing something wrong? Why does my first <div> seem to have no width?

Answer 1

It’s working actually, try to put min-height too and some background to see the changes:

#sbr {
    background:blue;
    float: left;
    min-height:200px;
    min-width: 200px;
    overflow: hidden;
    width: 200px;
}

However, this won’t work in IE (some versions), IE is having a problem in min-height or min-width. The min-height and min-width for IE is the height and width, but if you put width and height to your style, other browsers will fix your div to height and width specified. What you can do is to use the underscore hack:

#sbr {
    background:blue;
    float: left;
    min-height:200px; /* This is min-height to other browser */
    min-width: 200px; /* This is min-width to other browser */
    _height:200px; /* This is min-height to IE, only to IE */
    _width:200px; /* This is min-width to IE, only to IE */
    overflow: hidden;
    width: 200px;
}