Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Display DIVs in different order than in HTML

Any ideas?

7:42 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

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>

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 {

$footer {

#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?

7:53 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

hum... if position:absolute is a 'buggy hack' ;), then I can't think of anything other than reordering the html
7:58 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

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


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.


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

8:25 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

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

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]

8:27 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

but the footer... hum...

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

bottom: -[height of news div]px;


margin: [height of news div]px;

8:44 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

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.

9:39 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

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

Featured Threads

Hot Threads This Week

Hot Threads This Month