Div Under Div - Dont Know How To Do This

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

Solution 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

Solution 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.