Hi,
I'm trying to build a layout like this:
[div1] [div2] [div3] [ div4 ] [div5] [div6] [div7] [div8]
1,2 and 3 should be outlined on the same height, no matter what the individual height of each div is. Same goes for 4 and 5 and for 6,7 and 8.
So, as e.g. div4 becomes larger, 6, 7 and 8 should go along with it equally.
Now, is I put 6, 7 and 8 in another div, it works, but then they're no longer next to each other, but on top of each other.
Anyone understand my problem here?
Can divs be dynamically next to each other?
Honestly? No. Could you maybe attach a sample html/css pair, or link to the problem?
Well I get the whole row-type layout, but not why the bottom three should stack if you put them in a div together. Need some source to understand that one.
2nd try...
I've attached a file with the structure I tried to describe in my first post... (a little bit simplified)
If you browse this file, you'll see all the testdata next to each other, but I want the testdata to be in 3 seperate rows, like marked in the code. (id = row1, 2 and 3)
However, the styleargument float: left doesn't seem to bother about parent divs and all that. But if I leave them out, everything gets displayed below each other.
I hope the problem is clear now...
Can divs be dynamically next to each other?
If you change that code to the following:
<div id="row1"> <div style="float: left;">testdatatestdata</div> <div style="float: left;">testdatatestdata</div> <div style="float: left;">testdatatestdata</div> </div> <div id="row2" style="clear: both;"> <div style="float: left;">testdata<br>testdata<br>testdata<br>testdata</div> </div> <div id="row3" style="clear: both;"> <div style="float: left;">testdatatestdata</div> <div style="float: left;">testdatatestdata</div> <div style="float: left;">testdatatestdata</div> </div>
it will knock each row below the previous; the clear property does this.
That does the job
Thanx, it worked.
Another step closer in getting rid of tables...