Empty field of two columns

Question

I have X records, each with a fixed width and unknown height, and want them to be in two columns in the same div wrapper. However, when I put them in the float to the left, this happens.

How to remove empty space?

Answer 1

add clear: straight to even blocks and clear: left to odd ones!

<style type="text/css"> .odd { float: left; clear: left; } .even { float: right; clear: right; } </style> <div class="odd">content</div> <div class="even">content</div> <div class="odd">content</div> <div class="even">content</div> <div class="odd">content</div> 

Answer 2

Use :nth-child(odd) {clear:both;}

Working demo

CSS

 .outer {border:solid #f00; padding:10px;overflow:auto} .outer div{border:solid 1px #f00; float:left; margin:5px} .outer div:nth-child(odd) {clear:both;} 

HTML

 <div class="outer"> <div > content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br></div> <div > content content content content <br>content content content content <br>content content content content <br> </div> <div > content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br> </div> <div> content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br> </div> <div > content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br>content content content content <br> </div> </div> 

Answer 3

Try adding the following after the second block:

 <div style="clear:both">&nbsp;</div> 

He has to do the trick.

Answer 4

Create a left div container and a right div container and add your posts to them instead of just using float: left ...