floated div pushed down

Question

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

enter image description here

As you can see, div number 1 is higher than then other divs 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;
}

Since you have a 2 column layout wrap them in 2 containers that are foated next to each other. — Patsy Issa, Mar 07 '14 at 14:21
Ok that's cool wasn't trying to be picky, just was thrown for a sec. I see what you're trying to do now so ignore my earlier comment. Redid the jsfiddle: http://jsfiddle.net/TSLz6/3/ — JackArbiter, Mar 07 '14 at 14:26

Zword · Accepted Answer · 2014-03-07T17:52:39.847

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

edited Mar 07 '14 at 17:52

answered Mar 07 '14 at 14:30

Zword

6,605
3
27
52

@mattia check the new added fiddles in my answer – Zword Mar 07 '14 at 17:53

score 0 · Answer 2 · answered Mar 07 '14 at 14:50

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/

thanks for that. The only problem now is that I don't now how to change my javascript to put one `post` on the `.leftFloat` and one on the `.rightFloat`. This is also a responsive website So all the `post` width become 100% at a certain screen width. If a divide in two div the post, it's not gonna follow the correct order. — Mat, Mar 07 '14 at 15:15
If the posts are already created you can `append` them. See my answer to this question: http://stackoverflow.com/questions/2596833/how-to-move-child-element-from-one-parent-to-another-using-jquery/16285059#16285059 — JackArbiter, Mar 07 '14 at 15:17
See this question from a week ago, he has a responsive layout according to browser width. http://stackoverflow.com/questions/21938891/browser-resize-slidetoggle-not-working-well-together/21939662#21939662 Go to his site and you can see that changing your browser window's width will remove the 2 column layout and replace it with a single column layout. He includes the relevant jqery. — JackArbiter, Mar 07 '14 at 15:29
I checked the html of that side and it seems to me that they have just one section and all the div inside that section. — Mat, Mar 07 '14 at 15:37
He's not dealing with different div lengths, it's just a test page to see if his jquery is working. You can edit the jquery to deal with whatever you need to. If you need to post that as a new question go for it. — JackArbiter, Mar 07 '14 at 15:38
this is the jsFiddle:http://jsfiddle.net/mmauceri/ZB9Fy/ after the change suggest from Zwork. I can't understand why his example is working and mine is not. Any Idea? — Mat, Mar 07 '14 at 15:40

floated div pushed down

2 Answers2

Demo Fiddle1

Demo Fiddle2 / Watch Fullscreen