div under div - dont know how to do this

Question

I have block in my site and i want to do something like that: http://s13.postimg.org/6ue9a8bfr/Untitled_3.png

but what happens to me is this: http://s15.postimg.org/derz2m8h7/image.png

this is my div csS:

        background-color: #ffffff;
        width: 37.2%;
        border-top: 4px solid black;
        margin: 14px 0.4% 14px 0.4%;
        float: left;
        -webkit-border-radius: 2px;
        border-radius: 2px;

How i can do this?

Thanks!

Answer 1

Old way:

Use a table with 1 row (tr) and 3 cells (td), put your DIVs in those cells, make sure the cells are valign=top.

People that shun table layout way:

Use 3 container DIVs that will represent your columns, relatively position them side by side (float:).

Modern way:

Use flexbox positioning https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes or use the CSS column-* properties http://playground.html5rocks.com/#columns

Answer 2

Use three separate container divs to represent the three columns. Within each column, which has been set the appropriate width, make the divs inside the containers and set them at 100% each, thus filling up the entire width of the column container forcing the other div elements underneath. Then add appropriate margins.