Use overflow hidden to make content not wrap

Question

I want this :

But I get this :

Using this to style the containing div :

.option {
    display:inline-block;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    margin:10%;
}

The rest is nothing here : http://jsfiddle.net/n2LtN/

What is missing?

Answer 1

I fixed it by using display:inline-block instead of display:inline, without floating :

span, input[type="checkbox"] {
    display:inline-block;
    *display:inline; /*That's for IE*/
    *zoom:1; /*That's for IE*/
    width:auto;
}

See the working fiddle.

Answer 2

Remove float:left from span, input[type="checkbox"]

You should read up on how float works.