Question

I have some auto-generated HTML code.

When I add a float:left; on the shared class, it looks like this:

+----------------+   +--------------+
|   div 1        |   |   div 2      |
|                |   |              |
|                |   +--------------+
|                |                  
|                |   +--------------+
|                |   |   div 3      |
+----------------+   +--------------+

And what I want is this:

+----------------+   +--------------+
|   div 1        |   |   div 2      |
|                |   |              |
|                |   +--------------+
|                |                  
|                |   
|                |   
+----------------+   

+--------------+
|   div 3      |
+--------------+

How can I get this result?

My CSS code looks like this:

position: relative;
width: 40%;
float: left;
border: 1px solid black;
clear: left;

Answer 1

Assuming your divs have a common class name, such as .boxes, add this CSS:

.boxes:nth-child(odd) {clear: left;}

This will make it so that every odd-numbered box will clear the float and start a new line.

Alternatively, set the width of the container such that only two boxes will fit side-by-side, and then use display: inline-block instead of float: left;.