CODEWITHSUNDEEP
htmlcss
Jaime Rivera
Jaime Rivera

Reputation: 1406

Div below to another with display:inline-block attribute

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.

Upvotes: 2

Views: 8254

Answers (3)

Ilya Karnaukhov
Ilya Karnaukhov

Reputation: 3975

Oldschool fix:

<div id='calendarControlPane'">          
    <div id='calendarControl'">
        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;"></div>
        </div><br />
        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;"></div>
        </div><br />
        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;"></div>
        </div>


    </div>

</div>​

Simply add a 

<br />

after each div containing the inline-block class.

Upvotes: 2

ScottS
ScottS

Reputation: 72281

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;
}

Upvotes: 4

daniero
daniero

Reputation: 335

You're not really asking a question here, and the two bottom lines of your post are a bit hard to understand, but are you sure you don't want display: block instead?

edit: As drublic said, this is the default display value for divs, so you shouldn't need that style at all.

Upvotes: 1

Related Questions