CODEWITHSUNDEEP
htmlcss
Batman
Batman

Reputation: 6373

Stacking two divs on top of each other

I have two buttons but they're displaying side by side. I'd like to have them be on top of each other. 

<div id="top">
    <div>
        <label for="entityDropDown">Entity: </label>
        <select id="entityDropDown"></select>
        <div id="removeEntity"><a>✖</a></div>
    </div>          
    <br><br>
    <div id="entityStatus">
        <div>
            <label for="entityAvailable">Entity Available</label>
            <select id="entityAvailable" multiple=""></select>
        </div>
        <div id="moveButtons">
            <button type="button">Add User</button>
            <button type="button">Remove</button>
        </div>
        <div>
            <label for="entityAssigned">Entity Assigned</label>
            <select id="entityAssigned" multiple=""></select>
        </div>
    </div>
    <br style="clear:both;">
</div>

This is the fiddle http://jsfiddle.net/vS9vJ/

Upvotes: 0

Views: 557

Answers (3)

Carlo Cannas
Carlo Cannas

Reputation: 3262

Group them in an inline-block box and set their display to block. In your JSFiddle they are already in a inline-block container, so you won't need to specify that again.

In code: 

#moveButtons button{
    display: block;
}

You can then align vertically the boxes using the property vertical-align, for example, try this:

#entityStatus div {
    vertical-align: middle;
}

Live example: http://jsfiddle.net/vS9vJ/3/

Upvotes: 2

Arbel
Arbel

Reputation: 30999

Simply:

#moveButtons button {
    display:block;
}

Demo: http://jsfiddle.net/vS9vJ/1/

Upvotes: 5

Jon
Jon

Reputation: 10918

Just add this to your CSS:

#moveButtons button {
    float: left;
    clear: left;
    width: 100%;
}

Upvotes: 3

Related Questions