1
Well, lately I’ve seen in a lot of templates, that a div with the same id, takes places in different space. I as I have little knowledge of CSS, intended to do something that resembles this:
That is, a div with the same id takes 4 places up, and in the "5th" place, it automatically passes down and the structure repeats so until there are Ivs...
How can I do that?
3
First of all, a ID has that name because it means that it is a unique reference, to create an identifier for all your divs, you must use a classe, an example referring to what you requested could be done as follows:
#container {
width: 600px;
height: 600px;
}
.float {
width: 20%;
height: 50px;
margin: 10px 1% 0;
float: left;
border: 1px solid #000;
}<div id="container">
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
<div class="float">
</div>
</div>
This is exactly what I needed! By the way, you can tell me what was the "condition" for them to stay 4 in each line?
the float: left makes them line up side by side as long as they fit inside where they are, in this case, the div#container, and the size of them (width: 20%) determines how many will fit, in this account would be 5, but as I put a margin between them only fit 4...
Thanks for the excellent help!
Imagine, consider marking the answer as correct for future visitors to the post, please! :)
I already put in !!!
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
You want the 5th div to go down when the screen goes down?
– Taisbevalle
No, the screen is always the same but for example I write 5 Divs with the same id in the code and the fifth automatically goes down, as shown in the example
– Gonçalo