How to make
blocks following each other without any gaps?

Question

How can I avoid these spaces between blocks, which are supposed follow each other horizontally?

#wrapper {
    margin: 0px auto;
    width: 1054px;
}
#posts {
    float: left;
    width: 804px;
}
#sidebar {
    position: fixed;
    width: 250px;
    height: 100%;
    margin-top: 0px;
    margin-left: 804px;
}
.post {
    margin-right: 0px;
    border: 1px solid black;
    margin-bottom: 0px;
    padding: 10px;
    float: left;
    width: 400px;
}

<body>
    <div id='wrapper'>
        <div id='posts'>
            <div class='post'>
                <!-- Posts are supposed to be here following each other horizontally, going to the next line without huge spaces. -->
            </div>
        </div>
        <div id='sidebar'></div>
    </div>
</body>

Here is a picture for you showing these spaces:

Hello Dan, welcome to Stack Overflow! First off, I would love to help you, but I need some code on what you have actually done. If the code above IS what you have done already, then it does not even display the boxes correctly. Please give us a better representation of what your code actually is. If that is your code, and it is not working in general, say that, and I can help you further :) — Michael Jones, Aug 27 '15 at 12:44
The problem is you floating, so the 2nd post being longer takes up more space than the first. as you've decided on a two column layout, consider adjusting your logic so that you have two columns, rather than relying on the floats to handle themselves. — TZHX, Aug 27 '15 at 12:45
@MichaelJones Oh, okay! Here is the page with a whole code: danyaivnv.tumblr.com — dan, Aug 27 '15 at 12:47
@TZHX But if I will create two column layout all of the posts will follow each other not horizontally, but vertically in each column! As I am trying to create Tumblr theme, I need newest posts to be on the top of the page. — dan, Aug 27 '15 at 12:49
@dan try it like this. https://jsfiddle.net/LL9jr29s/1/ the trick is to create an large bottom padding and an the same large negatieve margin bottom this will force the browser the give an "height" to the floated elements. with lorum lpsum https://jsfiddle.net/LL9jr29s/2/ — Raymond Nijland, Aug 27 '15 at 13:48

score 1 · Answer 1 · answered Aug 27 '15 at 12:53

you will need to use columns if doing this in pure css...

#wrapper{
    width: 1054px;
    margin: 0 auto;
}

#posts {
    -moz-column-count: 4; /* Change the column count you're wanting to create */
    -moz-column-gap: 0px; /* Add Space between if you need them */
    -webkit-column-count: 4;
    -webkit-column-gap: 0px;
    column-count: 4;
    column-gap: 0px;
    width: 1054px;
}

#posts .post{
    display: inline-block;
    margin-bottom: 0px;
    width: 100%;
}

This will work in most browsers, if you need something for all browsers then you should google jquery masonry.

score 0 · Answer 2 · answered Aug 27 '15 at 12:53

Well it depends on what you are looking for.

<!-- rows -->
<div>
    <!-- columns -->
    <div style="float:left;">
        Things will be one after another here
    </div>
    <div style="float:left;">
        Same here
    </div>
</div>
<!-- rows -->
<div>
    <!-- columns -->
    <div style="float:left;">
        These will be AFTER the ones above, can't move them up higher without absolutes & javascript
    </div>
    <div style="float:left;">
        Same here
    </div>
</div>

How to make blocks following each other without any gaps?

2 Answers2

How to make
blocks following each other without any gaps?