Question

Hi
I have 3 SPAN that must be inline and have and a min-width.
Apparently on IE, the SPAN can’t have an min-width. I try to use DIV but when I put it inline, the min-width is ignore.

CSS

span {
    display: inline;
    min-width: 150px;
}

HTML

<span>1</span>
<span>2</span>
<span>3</span>

Answer 1

inline element can’t take width, height, vertical margin & padding. So you have to define display:inline-block; write like this:

span {
    display: inline-block;
    *display: inline;/* for IE7*/
    *zoom:1;/* for IE7*/
    min-width: 150px;
}

Source: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 10.3 Calculating widths and margins: 10.3.1 Inline, non-replaced elements:

The ‘width’ property does not apply. A computed value of ‘auto’ for ‘margin-left’ or ‘margin-right’ becomes a used value of ‘0’.

check this http://jsfiddle.net/yCvhB/5/