homepage Welcome to WebmasterWorld Guest from 54.204.249.184
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?
TheBlueEyz




msg:1175522
 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>
</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




msg:1175523
 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

TheBlueEyz




msg:1175524
 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

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




msg:1175525
 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

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




msg:1175526
 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

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

or

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

TheBlueEyz




msg:1175527
 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.

SethCall




msg:1175528
 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