floated div pushed down

Question

I am trying to implement a wall split in 2 columns:

As you can see, div number 1 is higher than then other div s and it pushed down div 3 and 4. I would like the margin between 2 and 4 to be the same (20px) of 1 and 3.

this is the code:

    <div class="wall">

            <div class="postDiv">

                      /* this is DIV NUMBER 1 */
                      <div data-post-id="91" class="post" id=""><img src="/images/male_profile.png" class="postImg">    <div class="formatted-text"><h4>roberto mancino</h4>                     <h5>tryewklekwleklweklwkelkweklweklweklwkelwkelkwelkwlekwlekwlekwelkwelkwelwkelkwelkwelkwlekwleklweklwkelweklwkelwkelwkelwkelweklwkewleklwkelwkelwekwe</h5><h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a></div></div>

                      /* this is DIV NUMBER 2 */
                      <div data-post-id="90" class="post" id=""><img src="/images/male_profile.png" class="posting">    <div class="formatted-text"><h4>roberto mancino </h4><h5>try</h5><h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a></div></div>

                      /* this is DIV NUMBER 3 */
                      <div data-post-id="89" class="post" id=""><img src="/images/male_profile.png" class="posting">     <div class="formatted-text"><h4>roberto mancino </h4><h5>try</h5><h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a></div></div>

                      /* this is DIV NUMBER 4 */
                      <div data-post-id="88" class="post" id=""><img src="/images/male_profile.png" class="posting">    <div class="formatted-text"><h4>roberto mancino </h4><h5>try</h5><h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a></div></div>



              </div>
       </div>

CSS

.wall{
margin-top: 20px;
width: 100%;
height: 100%;
}

.post{
clear: left;
background-color: lime;
display: block;
z-index: 2;
position: relative;
padding:20px 20px 20px 20px;
width: 42%;
margin: 20px 10px 0px 10px;
background-color: #edeff4;
float: left;
border: 1px solid rgb(216,216,216);
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}


.post:nth-child(2n) {
float: right;
clear: right;
}


.formatted-text{

margin-left:80px;
word-wrap: break-word; /* or "normal" */
overflow-wrap: break-word;
}

Answer 1

You can use column-count to get the display you are looking for if you are ok with changing your HTML:

ul {
    /*styles*/
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

Demo Fiddle1

---

I made a fiddle replicating the styles in the below comment.Check it:

Demo Fiddle2 / Watch Fullscreen

Answer 2

What I've done in the jsfiddle posted at the bottom is add two div containers, one rightFloat and one leftFloat, each containing two roberto mansion divs (they could contain any number), and then a third overall container with these two inside that has auto margins so as to center it. The CSS is below (note that i removed the nth-child CSS style):

.wall {
    margin-top: 20px;
    width: 100%;
    height: 100%;
}
.post {
    background-color: lime;
    z-index: 2;
    padding:20px 20px 20px 20px;
    margin: 20px 10px 0px 10px;
    background-color: #edeff4;
    border: 1px solid rgb(216, 216, 216);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.leftFloat {
    float: left;
    clear: left;
    width: 50%;
    display: block;
    position: relative;
}
.rightFloat {
    float: right;
    clear: right;
    width: 50%;
    display: block;
    position: relative;
}
.container {
    margin-left:auto;
    margin-right:auto;
    width: 100%;
}
.formatted-text {
    margin-left:80px;
    word-wrap: break-word;
    /* or "normal" */
    overflow-wrap: break-word;
}

The HTML:

<div class="wall">
    <div class="postDiv">
        <div class="container">
            <div class="leftFloat">
                <div data-post-id="91" class="post" id="">
                    <img src="/images/male_profile.png" class="postImg">
                    <div class="formatted-text">
                         <h4>roberto mansion</h4> 
                         <h5>tryewklekwleklweklwkelkweklweklweklwkelwkelkwelkwlekwlekwlekwelkwelkwelwkelkwelkwelkwlekwleklweklwkelweklwkelwkelwkelwkelweklwkewleklwkelwkelwekwe</h5>

                         <h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a>

                    </div>
                </div>
                <div data-post-id="90" class="post" id="">
                    <img src="/images/male_profile.png" class="posting">
                    <div class="formatted-text">
                         <h4>roberto mansion</h4>

                         <h5>try</h5>

                         <h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a>

                    </div>
                </div>
            </div>
            <div class="rightFloat">
                <div data-post-id="89" class="post" id="">
                    <img src="/images/male_profile.png" class="posting">
                    <div class="formatted-text">
                         <h4>roberto mansion</h4>

                         <h5>try</h5>

                         <h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a>

                    </div>
                </div>
                <div data-post-id="88" class="post" id="">
                    <img src="/images/male_profile.png" class="posting">
                    <div class="formatted-text">
                         <h4>roberto mansion</h4>

                         <h5>try</h5>

                         <h6>today - <span>about 10 minutes ago</span></h6><a style="font-size:11px;" class="cancelPost">cancel</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

jsfiddle: http://jsfiddle.net/TSLz6/5/