How to make floats inside container but without wrapping

I have

        <div id="cont">
    <div>a</div>
    <div>b</div>
   开发者_如何学C <div>c</div>
    <div>d</div>
    </div>

#cont div
{
   float: left
}

What happens is:

a b 
c d

I want to make them:

a b c d

which means - I dont mind them not to wrap... and not to have a scroll!

Thanks all

Try adding a fixed width to your container div.
If you don't want a scrollbar to be appear, then you can use overflow: hidden as well.

I think there are only two ways to get around the browsers' natural behavior of wrapping the floats.

1: Assign a width to the #cont element.

2: Use tables instead.

Play with the display: inline property with some of your <div>s.

Normally, a <div> is displayed as a block, which means what follows will appear below. Setting it to inline makes it flow with the text.

This CSS should do it :

#cont div
{
    display:inline;
}

#cont
{
    overflow-x:scroll; /*Not sure if you want a scroll or not. Use overflow-x:hidden; if you don't want it.*/
    white-space: nowrap;
}

Add overflow:hidden and set width to your div

#cont { width:500px; overflow:hidden; }
#cont div { width:125px; float:left; }