Welcome to WebmasterWorld Guest from 23.20.77.100

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)

Junior Member

10+ Year Member

joined:June 25, 2004
posts:63
votes: 0


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?

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

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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

Junior Member

10+ Year Member

joined:June 25, 2004
posts:63
votes: 0


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?

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

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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]

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

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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;

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

Junior Member

10+ Year Member

joined:June 25, 2004
posts:63
votes: 0


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 June 25, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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