CODEWITHSUNDEEP
csshtmlweb
user3582590
user3582590

Reputation: 187

Trouble aligning divs horizontally

I have two divs and I want to align them horizontally. I'm doing this:

CSS:

.horidiv {
    display: inline-block;
    width: 20em;
    height: 20em;
}

HTML:

<div class="horidiv">
    <textarea></textarea>
    <br>
    <input type="text">
    <br>
    <div id="sendbutton">Send</div>
</div>
<div class="horidiv">
    <iframe width="300" height="225" frameborder="0" style="border:0" src="<gMapsAPI"></iframe>
    <p>Some lines of text</p>
</div>

What do I need to change?

Upvotes: 0

Views: 41

Answers (1)

j08691
j08691

Reputation: 208032

Just missing vertical-align:top;

.horidiv {
    display: inline-block;
    width: 20em;
    height: 20em;
    border:1px solid #999;
    vertical-align:top;
}

jsFiddle example (border added to visibility)

Upvotes: 1

Related Questions