homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Display DIVs in different order than in HTML
Any ideas?

 7:42 pm on Jun 25, 2004 (gmt 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>

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)

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)

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)

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)

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)

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)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved