Why div are not aligned horizontally

Question

I am trying to align 2 divs horizontally inside one div.

Here is codepen link Check Here. When I add margin-top to left div it is not moving up.

What am I doing wrong?

<footer id="contact">           
    <div class="reservation" style="display: block;border:1px solid red; "> 
        <div class="reserve-address-div" style="display: inline-block;width:45%;border:1px solid red;margin-top:-40px;">        

            <h4>51 Area, Barmuda Triangle, Mars</h4>
            <h4>0165466546</h4>
            <h4>vivek.tarun17@gmail.com</h4>        

        </div>
        <div class="reserve-booking-div" style="display: inline-block; width:45%;border:1px solid red; ">                       
            <form>
                <input type="text"  name="name" placeholder="Name" /><br>           
                <input type="email" name="email" placeholder="Email"/><br>
                <input type="text"  name="subject" placeholder="Subject"/><br>
                <textarea placeholder="message" rows="5"></textarea><br>
                <input type="button" value="Submit">
            </form>     
        </div>  
    </div>
</footer>

Why are you only using inline styles? You should move all styles to a separate file (or use the CSS section in codepen). — stelioslogothetis, Oct 01 '17 at 16:03
remove `margin-top` and add `#contact .reservation > div { vertical-align: top; }`... see https://codepen.io/anon/pen/borWwO ? — kukkuz, Oct 01 '17 at 16:04
why margin-top is not working..Theoretically it should work rt? — VivekT, Oct 01 '17 at 16:13

score 1 · Answer 1 · answered Oct 01 '17 at 16:08

Please try to use vertical-align: top something like this:

<div class="reservation">   
    <div class="reserve-address-div" style="display: inline-block; ... vertical-align:top">     
        ...
    </div>
    <div class="reserve-booking-div" style="display: inline-block; ... vertical-align:top"> 
        ...

vertical-align property is useful.

You can put inline-blocks along with the top of parent element, e.g., div.

VXp · Answer 2 · 2018-06-10T08:38:44.990

How about the Flexbox solution:

.reservation {
  display: flex;
  padding: 2.5px;
  border: 1px solid red;
}

.reserve-address-div, .reserve-booking-div {
  flex: 1;
  margin: 2.5px;
  padding: 5px;
  border: 1px solid red;
}

<footer id="contact">           
  <div class="reservation"> 
    <div class="reserve-address-div">        
      <h4>51 Area, Barmuda Triangle, Mars</h4>
      <h4>0165466546</h4>
      <h4>vivek.tarun17@gmail.com</h4>        
    </div>
    <div class="reserve-booking-div">                       
      <form>
        <input type="text" name="name" placeholder="Name"><br>           
        <input type="email" name="email" placeholder="Email"><br>
        <input type="text" name="subject" placeholder="Subject"><br>
        <textarea placeholder="message" rows="5"></textarea><br>
        <input type="button" value="Submit">
      </form>     
    </div>  
  </div>
</footer>

Adjust margins and padding to your needs.

score 1 · Answer 3 · answered Oct 01 '17 at 19:23

The reason .reserve-address-div is being pushed down is because the default vertical-align value is set to baseline. As another poster mentioned, setting the vertical-align property to top for .reserve-address-div will remove the space above that div.

You can read more about the issue here.

An alternate solution would be to use flexbox on the .reservation container, as I've demonstrated in the snippet below.

Hope this helps!

.reservation {
  border: 1px solid red;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
}

.reserve-address-div {
  display: inline-block;
  width: 45%;
  border: 1px solid red;
}

.reserve-booking-div {
  display: inline-block;
  width: 45%;
  border: 1px solid red;
}

<footer id="contact">
  <div class="reservation">
    <div class="reserve-address-div">

      <h4>51 Area, Barmuda Triangle, Mars</h4>
      <h4>0165466546</h4>
      <h4>vivek.tarun17@gmail.com</h4>

    </div>
    <div class="reserve-booking-div">
      <form>
        <input type="text" name="name" placeholder="Name" /><br>
        <input type="email" name="email" placeholder="Email" /><br>
        <input type="text" name="subject" placeholder="Subject" /><br>
        <textarea placeholder="message" rows="5"></textarea><br>
        <input type="button" value="Submit">
      </form>
    </div>
  </div>
</footer>

sorry for late reply .. yes it is working. i used vertical-align: top. Thanks for reply. — VivekT, Oct 02 '17 at 16:35
@VivekT you're welcome & good to hear. Please be sure to mark as answered! — Rich, Oct 03 '17 at 02:56

Why div are not aligned horizontally

3 Answers3