Display DIVs in different order than in HTML

Any ideas?

[TheBlueEyz]

Wonder if anyone has any ideas about this.

Say I have the following HTML:

<div id="container">
<div id="news">stuff</div>
<div id="info">stuff</div>
<div id="more">more stuff</div>
<div id="footer">footer content</div>
</div>

And the following CSS:

/* center the container in IE */
body {
text-align: center;
margin: 0;
}
/* center the container for other browsers */
#container {
margin: 0 auto;
width: 800px;
}
#news, #info, #more {
width: 800px;
}
#info, #more {
float:left;
}
$footer {
clear:both;
}
#news {
?
}

What do I need to do to the #news box in order to place it BELOW the other two?

Linearly it occurs (in the HTML) ABOVE the other two - and without a series of buggy absolute positioning hacks, I can't think of a way to get the news box BELOW the other two, but above the footer.

Any ideas?

[SethCall]

hum... if position:absolute is a 'buggy hack' ;), then I can't think of anything other than reordering the html

[TheBlueEyz]

The reason I say the absolute positioning is a buggy hack, is because using it forces the news box to stay the same place that the viewport initially puts it.

It's like using

bottom:0;
position:absolute;

for a footer. The footer is placed at the bottom of the viewport - and then STAYS in that spot in the document, like it's glued on top of the page.

Hmmm...

Is this one case where content is in fact not separate from structure?

[SethCall]

wrap all three divs (news, info, and more) in a container div.

make that div position:relative, so it flows with content and creates a bounding box (static won't make a bounding box)

Then, make

position:absolute;
bottom: 0;

on the news div. That should make the news div stick to the bottom of the containing div.

[edited by: SethCall at 8:27 pm (utc) on June 25, 2004]

[SethCall]

but the footer... hum...

if you know how high your news div is, then one solution for the footer is to either

position:abs
bottom: -[height of news div]px;

or

position:abs
bottom:0
margin: [height of news div]px;

[TheBlueEyz]

No luck :(

Well, what I might do (since this is going to be script generated anyway) is simply switch the content of the necessary boxes. So #news won't actually contain news, and #more will actually contain news - but that's ok..

Then any desired CSS can be applied to the required div's.

[SethCall]

that doesn't work? I do that now.. hum... I'll try to experiment when I get a chance.