sibling divs top margins not starting from same point

Question

I'm trying to figure out why on earth the two sibling DIVs (date-tile & date-details) don't align vertically. Both have a margin-top of 6.5px, but the second div's margin seems to start from outside the parent div. See CSS in accompanying JSFiddle.

HTML:

<div class="uthlutanir">
  <div class="event-date">
    <div class="date-tile">
      <div class="date-tile-month">
        des
      </div>
      <div class="date-tile-day">
        20
      </div>
      <div class="date-tile-weekday">
        Fös
      </div>
    </div>
    <div class="date-details">
      <strong>15:00</strong> Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

https://jsfiddle.net/1k0sr9m8/

nonopolarity · Accepted Answer · 2020-01-13T23:16:12.063

That's because you have the float:

.date-tile {
    float: left;

float on MDN:

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page

So that's why they are side by side.

See the sample in https://jsfiddle.net/m52abnso/2/

Also you have the margin-left on .date-details.

Removing it will get you the result: https://jsfiddle.net/m52abnso/3/

sibling divs top margins not starting from same point

1 Answers1