Question

Given this css:

#parent {
    width: 100px;
    height: 100px; 
    background-color: #090;
}
.childs {
    width: 50px;
    height: 50px; 
    background-color: #009;
    border: 1px solid #999;
}

and this html:

   <div id="parent">
        <div class="childs"><p>aaa</p></div>
        <div class="childs"></div>
        <div class="childs"></div>
   </div>

this is demo
http://jsfiddle.net/A3PJu/2/

I want that children divs placing in horizontal and not in vertical (as are they now), how make this?

float: left for children tags, not working in this case

Answer 1

You can use display:inline-block with white-space:nowrap. Write like this:

#parent {
        width: 100px;
        height: 100px;
        background-color: #090;
        white-space:nowrap;
        font-size:0;
    }
    .childs {
        width: 50px;
        height: 50px;
        background-color: #008;
        border: 1px solid #999;
        display:inline-block;
        *display:inline;/* For IE7 */
        *zoom:1;/* For IE7 */
        white-space:normal;
        font-size:13px;
        vertical-align:top;
    }

Check this http://jsfiddle.net/A3PJu/3/