Despite feeling like this question may have been asked numerous times before, I've searched high and low for an answer to no avail - both here and on Google.
My HTML page has a maximum width that limits the size of the content. This content includes several images within DIV tags that are floated to the right.
I've created an example in JSFiddle, though it's a bit exaggerated compared to my real-life scenario where there aren't as many floated elements. As the blue-bordered DIV containing the content gets closer to its maximum width, the vertical space between the red-bordered DIVs isn't enough, causing the lower DIV to be pushed to the left.
I attempted adding clear: right; to the DIVs, but encountered another issue where they cleared relative to everything, even elements outside the container. The green-bordered DIV outside the container ended up pushing down the red-bordered DIVs, which wasn't what I wanted.
Is there a way to make sure the red-bordered DIVs move below the ones above them, restricting the effect only within the blue container so that the green-bordered DIV doesn't disrupt their position? While I'm open to Javascript solutions, pure CSS would be preferred.
Here is the CSS code:
#otherthing {
height: 300px;
width: 80px;
border: green thin solid;
float: right;
}
#container {
max-width: 36em;
border: blue thin solid;
}
.test {
border: red thin solid;
float: right;
clear: right;
height: 180px;
width:60px;
}