I am looking to create multiple rows that are horizontally floated, as shown in the image. However, I am facing an issue with setting the width of the container because I do not know the exact number of rows that will be added.
Currently, my code looks like this:
HTML:
<div class="container">
<div class="row">
Lots of content
</div>
<div class="row">
Lots of content
</div>
<div class="row">
Lots of content
</div>
<div class="row">
Lots of content
</div>
</div>
CSS:
.row {
float:left;
width:23%;
margin-left:1%;
margin-right:1%;
background-color:#252525;
height:500px;
color:white;
}
.container {
width:500%;
}
The challenge is that the width of the container needs to be manually adjusted each time a new row is added or deleted. Is there a more efficient way to handle this situation?