How to create 4 css float columns on the left without the same height

Question

This is my current css http://jsfiddle.net/3xcxb/

I want the result to be like this.

Let me know..

Answer 1

Two small changes:

• Use multiple <ul> s. I added a closing </ul> every second <li> and limited their width in css. Think of a layout as four columns of two elements (or more) each.
• Make <ul> floating to the left, not <li> s.

Updated script: http://jsfiddle.net/redler/3xcxb/1/

Answer 2

Use vertical columns instead of horizontal rows.

Example:

 <style type="text/css"> .column { float: left; width: 25%; } </style> <div id="container"> <div class="column column1"> blocks here... </div><!-- end .column1 --> <div class="column column2"> blocks here... </div><!-- end .column2 --> <div class="column column3"> blocks here... </div><!-- end .column3 --> <div class="column column4"> blocks here... </div><!-- end .column4 --> </div><!-- end #container --> 

http://jsfiddle.net/j3Z3J/1/