Floating elements will not line up

Question

I would like for each element to be the same size and align properly, but as you can see, the elements with fewer total weeks are positioned lower by that space.

I can add phantom rows, but I am hoping to make this correction in css. How can I achieve this?

CSS

.miniMonth{
  position: relative;
  left: 0px;
  display: inline-block;
  padding: 30px;
  width: 340px;
  height: 327px;
  cursor: pointer;
  border: solid black 1px;
}
.contents {
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 0; 
  right: 0;
  overflow: auto;
  background-color: rgb(225, 225, 225);
}

HTML

<div class="contents">
  <div class="miniMonth">/* CALENDAR CONTENT*/</div>  
   ...
  <div class="miniMonth">/* CALENDAR CONTENT*/</div>
</div>

possible duplicate of [CSS Inline-Block Elements Not Lining Up Properly](http://stackoverflow.com/questions/19366401/css-inline-block-elements-not-lining-up-properly) — Huangism, Aug 10 '15 at 20:16
@NateMay this is a common mistake made for inline block elements. Usually beginners when it comes to using inline block. Not a big deal, more googling will solve your issues faster — Huangism, Aug 10 '15 at 20:23

score 5 · Accepted Answer · answered Aug 10 '15 at 20:24

Use vertical-align: top. The default is baseline which is why all of the bottoms of each .miniMonth's content are aligned.

.miniMonth {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 30px;
  width: 340px;
  height: 327px;
  cursor: pointer;
  border: solid black 1px;
  box-sizing: border-box;
}

score 1 · Answer 2 · answered Aug 10 '15 at 20:18

1

You can use flexbox. Set parent div to display: flex and Child (minimonths) to flex: 1 1 auto; this will align them in same row and will be the same height.

answered Aug 10 '15 at 20:18

Shishibi

53
10

Yep. Do yourself a favour and use flexbox. – Christian Bonato Aug 10 '15 at 20:24

Floating elements will not line up

2 Answers2