4 replies [Last post]
Mossie
Offline
newbie
Hilversum, Netherlands
Last seen: 16 years 19 weeks ago
Hilversum, Netherlands
Joined: 2003-07-25
Posts: 5
Points: 0

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?

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 44 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Can divs be dynamically next to each other?

Honestly? No. Shock 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.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Mossie
Offline
newbie
Hilversum, Netherlands
Last seen: 16 years 19 weeks ago
Hilversum, Netherlands
Joined: 2003-07-25
Posts: 5
Points: 0

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...

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 44 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Mossie
Offline
newbie
Hilversum, Netherlands
Last seen: 16 years 19 weeks ago
Hilversum, Netherlands
Joined: 2003-07-25
Posts: 5
Points: 0

That does the job

Thanx, it worked.
Another step closer in getting rid of tables... Smile