In my web application, I had a div with an unlimited width that users could slide horizontally, and it had a dynamic height based on the user's screen. Inside this div, I needed to place several more divs in a particular layout pattern.
You can view a sample of what I'm trying to achieve here or check out the source code.
Currently, the divs are floating left next to each other, but I want them arranged like this:
The first div should be positioned at the top left corner, then the second div below it. If there is enough space, the third div should go underneath the first two or above them.
Here's an illustration for reference:
+------------------------------------------------------------
|
| div 1 div 3 div 6
|
| div 4
|
|
| div 2 div 5
|
|
+--------------------------------------------------------------
I've tried using float:left and display:block but haven't been successful. Anyone have any ideas?