I am dealing with this specific layout:
<div class="container">
<div class="row">
<div class="category">
<div class="label">Label1: </div><div class="content">Content1</div>
</div>
<div class="category">
<div class="label">Label2: </div><div class="content">Content2</div>
</div>
</div>
<div class="row">
<div class="category">
<div class="label">Label3: </div><div class="content">Content3</div>
</div>
<div class="category">
<div class="label">Label4: </div><div class="content">Content4</div>
</div>
</div>
</div>
I am aiming to ensure that each row occupies its own row if there is enough space available. However, in cases where the window size decreases or the resolution isn't ideal, I want the content to move to a new line at each category. Currently, when space is insufficient, it greatly impacts the formatting of the content. The CSS code I am using looks like this:
.container {
width: 600px;
background-color: black;
color: white;
padding: 4px;
}
.row {
clear: both;
}
.category {
width: 300px;
margin-top: 2px;
margin-bottom: 2px;
}
.left {
float: left;
}
.right {
float: right;
}
.label {
float: left;
}
.content {
display: block;
overflow: hidden;
color: black;
background-color: white;
text-align: center;
}
My current issues revolve around two main points. Firstly, the container does not expand to accommodate the vertical size of its contents. Secondly, resizing the container width causes significant distortion instead of transitioning to the next line as intended. In the actual project, the container width is set as a percentage of the body width, meaning it needs to be responsive and function properly on different screen sizes.