-1

I want to have 2 divs inside another one but the with different margin-top, every time I try to set the margin-top of the first one the second one aligns according to the first one. Let's say that first and second are two divs inside another div. I would like something like this:

                 second

first

But I'm getting this:

this second

You can have a clearer idea maybe visiting this fiddle

AlexGH
  • 2,735
  • 5
  • 43
  • 76
  • I would like to know what you're using this for if you wouldn't mind. There may be a more elegant solution you're not aware of: I suspect people will be aligning and positioning which probably isn't ideal. – jaunt Oct 25 '17 at 21:12

2 Answers2

2

Flexbox to the rescue!

#wrapper {
  display: flex;
}

.divF {
  margin-top:20px;
}
/*Border added for demo so you can see what's happening*/
#wrapper { border: 1px solid #777; }
.divF, .divS { border: 1px solid #CCC; }
<div id="wrapper">
  <div class="divF">
    <p>first</p>
  </div>
  <div class="divS">
    <a href=#>second</a>
  </div>
</div>
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
1

Try vertical-align: top; Check the code below.

.divF{
  display:inline-block;
  margin-top:20px;
  vertical-align: top
}

.divS{
  display:inline-block;
  vertical-align: top
}
<div>
<div class="divF">
<p>
first
</p>
</div>
<div class="divS">
<a href=#>second</a>
</div>
</div>
izulito
  • 477
  • 3
  • 12
  • 1
    Chris' answer is better if you want to use flex (which i recommend). Otherwise, if you want to continue using display: inline-block, my solution will work. – izulito Oct 25 '17 at 21:14