CODEWITHSUNDEEP
htmlcss
VivekT
VivekT

Reputation: 81

Why div are not aligned horizontally

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>[email protected]</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>

Upvotes: 2

Views: 1752

Answers (3)

VXp
VXp

Reputation: 12118

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>[email protected]</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.

Upvotes: 1

Rich
Rich

Reputation: 3336

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>[email protected]</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>

Upvotes: 1

ghchoi
ghchoi

Reputation: 5166

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.

Upvotes: 1

Related Questions