Why aren't my divs lining up correctly?

Question

I am making a webpage with 2 divs in a div, but the 2 smaller divs aren't lining up, here is an example:

Here is my HTML:

<div id = "creators" class = "big-part">
    <h3>Creators</h3>

    <div class = "creator_name">
            <h4>FlipFloop</h4>
            <p>text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text</p>
        </div>
        <div class = "creator_name">
            <h4>TickTock</h4>
            <p>text text text text text text text text text text text text text text text text text text text text text text text text</p>
        </div>
            <!--<div class = "creator_name">
            <h4>Name</h4>
            <p>Text</p>
        </div>-->

        </div>

and my CSS:

.creator_name {
    width: 35%;
    display: inline-block;
    margin: 2% 2%;
}

when I use float: left :

Have you checked with the developer tools in your browser? – Roope Dec 27 '15 at 17:43 — Roope, Dec 27 '15 at 17:43

score 2 · Accepted Answer · answered Dec 27 '15 at 17:44

2

try this:

.creator_name {
vertical-align:top;
}

jsfiddle link click here

answered Dec 27 '15 at 17:44

Prajwal Shrestha

524
3
12

1

A better answer would also explain _why_ this solution works – andyb Dec 27 '15 at 20:51

Why aren't my divs lining up correctly?

1 Answers1