Layout adjustment with elements that are automatically generated

Question

I’m making a site where one of the pages is responsible for listing user posts in box form. Each box corresponds to a new user post, which is generated by the ASP.NET MVC 4 code with Entity Framework 6 automatically, picking up the database information. Doubling the Divs in the html and the formatting of layout of these Divs in css, showcasing and creating links, everything perfect.

But when a new publication box is inserted, it goes down from the previous one and I wanted it to stay on the side and go down with css.

I used a tag in css that is float:left, however the div page body center does not get the height responsive when an element is float, because to keep her responsive I didn’t set the height, I just set a padding-bottom.

I wanted to know how I make the boxes go to the right side and go down as they are automatically generated and keep responsive to height of the body of the page?

Example:

Answer 1

This is a somewhat complex problem involving the application’s CSS. It is one of the problems that Bootstrap proposes to solve.

Roughly speaking, what you need to do is the following:

.minha_div_celula {
    width: 33.33333333%;
    float: left;
}

In addition, the <div> which entails the <div> daughters should have something like:

.div_mae {
    width: 100%;
    float: left;
}

You may need to use a <div> clearfix to make the browser understand that the <div> daughters broke up, and that a new <div> must be generated outside the previous mother-daughter assembly.

I have a print shop whose website implements exactly what you want to do.

Answer 2

A very simple solution would be to put the style overflow: hidden in the element that is the block container. And for these blocks, use the float: left.

See in this example if that’s what you want:

var conteiner = document.getElementById("conteiner");
var btn = document.getElementById("btn");
btn.addEventListener("mousedown", function() {
    conteiner.innerHTML += "<div class='bloco'></div>"
});

.bloco {
    width: 50px;
    height: 50px;
    border: 8px solid red;
    float: left;
    margin: 4px;
}
#conteiner {
    overflow: hidden;
    border: 2px solid black;
    width: 240px;
}

button {
  margin: 5px;
}

Clique no botão para adicionar vários blocos sucessivamente.<br/>
<button id="btn">Adicionar novo bloco</button>
<div id="conteiner">
    <div class='bloco'></div>
</div>