Question

I have this html:

<div id='calendarControlPane'>          
    <div id='calendarControl'>

        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;">
            </div>
        </div>

        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;">
            </div>
        </div>

        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;">
            </div>
        </div>

    </div>      
</div>

I’m using “display:inline-block” on container divs because I want those divs to fit the size of their contents.

The problem I have is that they are drawn next to each other and need to be drawn below each other.

Answer 1

Well, depending upon your actual final application, using a float can work (see fiddle), though older versions of IE can choke on it:

HTML

<div id="calendarControlPane">          
   <div id="calendarControl">
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
   </div>
</div>

CSS

#calendarControl > div {
    float: left;
    clear: left;
    border: 1px solid black;
}

#calendarControl > div > div {
    width: 14px;
    height: 15px;
}