Display inline-block pushing final element below other elements

Question

HTML:

<div id='Content'>
<div>
    <div>
        <pre>SOME TEXT</pre>
        <div id='map1' style='width:450px;height:350px;'></div>
    </div>
    <div>
        <pre>SOME TEXT</pre>
        <div id='map2' style='width:450px;height:350px;margin-left:-17px;'></div>
    </div>
</div>
<div style='width:300px;'>
    <h1>Contact Us</h1><br>
    <form action="/Account/Contact" onsubmit="return SubmitMessageForm(this,event,this.childNodes[1]);" method="post">
        <pre style="display:none;"></pre>
        <label>
            <span>Person To Email</span>
            <select name='ToContact' id='ToContact'>
                <option value='0'>Mark</option>
                <option value='1'>Paul</option>
            </select>
        </label>
        <label>
            <span>Name</span>
            <input type="text" id="Name" name="Name"/>
        </label><br>
        <label>
            <span>Your Email</span>
            <input type="email" id="Email" name="Email"/>
        </label><br>
        <label>
            <span>Message</span>
            <textarea name="Message" rows="8" id="Message"></textarea>
        </label><br>
        <label><input style='width:50px;' type="submit" value="Send"/></label>
    </form>
</div>
</div>

CSS:

body > div#Content {
    text-align:center;
    white-space:nowrap;
}
body >div#Content >div {
    display:inline-block;
}
    body >div#Content >div >div {

    }
        body >div#Content >div >div >pre {
            line-height:20px;
            margin-right:50px;
        }
        body >div#Content >div >div >div {
            display:inline-block;
        }
        body >div#Content >div >div >h1 {
            font-size:20px;
        }
        body >div#Content >div >form {
            width:100%;
        }
            body >div#Content >div >form >label {
                float:left;
            }
                body >div#Content >div >form >label >span {
                    float:left;
                }
                body >div#Content >div >form >label >input, body >div#Content >div >form >label >textarea, body >div#Content >div >form >label >select {
                    width:300px;
                    float:left;
                }

I'm trying to display two div elements side by side, but the second div is pushed down by about 500px for some reason. How do I make these two elements go side by side but also be aligned in the center of the parent div? When I try to remove display:inline-block and add float left it doesn't center

What it currently looks like

This question would be better with a http://jsfiddle.net – Itay Oct 09 '13 at 13:24 — Itay, Oct 09 '13 at 13:24
could you add a [jsfiddle](http://jsfiddle.net)? – yelly Oct 09 '13 at 13:24 — yelly, Oct 09 '13 at 13:24
Code is posted, copy and paste anyone? lol – RyanS Oct 09 '13 at 13:29 — RyanS, Oct 09 '13 at 13:29

score 5 · Accepted Answer · answered Oct 09 '13 at 13:25

5

Set the vertical-align:top; on the inline element. This should render it side by side

Also heads up, the code you posted doesnt validate.. http://jsfiddle.net/wJtmq/

answered Oct 09 '13 at 13:25

RyanS

3,964
3
23
37

That fixed it thankyou, I don't know why it doesn't validate it works perfectly fine, jsfiddle doesn't even seem to recognize the closing form tag. – user1763295 Oct 09 '13 at 13:30
Please accept ;) I dont really have time to look at it all just make sure that you close tags in the right order. You can use the w3 validater to clear anything up – RyanS Oct 09 '13 at 13:32
I can't accept for another 5 minutes, but I will when I can. :) – user1763295 Oct 09 '13 at 13:32
Oh okay, sorry I forgot about that. Cheers – RyanS Oct 09 '13 at 13:33

Display inline-block pushing final element below other elements

1 Answers1