CSS changing DIV order

Dear Sitepointers,

I have a problem with my div ordering.
I’m ordering my div in this way in the HTML:


<div id="container">
 <div id="content">
  
 </div>
 <div id="header">
  
 </div>
 <div id="menu">
  
 </div>
 <div id="footer">
  
 </div>
</div>

How can I style it that I can create it in a lay-out where the header comes first, then the menu, content, footer.
The site has to be centered on the x-axis and the footer always sticks to the end of the content. When there is not enough content it has to stick to the bottom of the browser.

It has to work in IE6 also (including the end-content/bottom footer and the centering of the page…)

Can anyone help me?

Sam

?

<div id=“header”></div>

<div id=“menu”></div>

<div id=“container”>

<div id=“content”></div>

<div id=“footer”></div>

</div>

Sorry Skorzeny,

But this is not the answer to my question.
I need my div ordering in the HTML my way for Google-results, CSS-disabling, etc.
And why is your container only containing content and footer?
I need the whole site (= container) centered on the middle of the page.

For the record:
I don’t want to change the HTML, but I want to use CSS to order the DIV’s on render.

Hi,

If your header and menu are fixed heights then you can make room for them with padding top on the content and then absolutely place them into position.

Something like this very dated example.

If your menu and header are fluid heights then you can’t really change the order.

Here’s another example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100&#37;
}
#outer {
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height*/
    position:relative;
}
* html #outer {
    height:100%
}
#content {
    border-top:40px solid #fff;/* soak up negative margin*/
    width:760px;
    padding:5em 0 0 0;
}
#header {
    background:red;
}
#footer {
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin and header soak up*/
    clear:both;
}
/* clearfix is used to clear floats (if any) and to fix opera's resize bug*/
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    display:inline-block
}
/* mac hide \\*/
* html .clearfix {
    height: 1%
}
.clearfix {
    display: block
}
/* End hide */

#header {
    height:5em;
    overflow:hidden;
    position:absolute;
    top:40px;
    left:0;
    width:760px;
}
#menu {
    margin:0;
    padding:0;
    text-align:center;
}
#menu li {
    display:inline;
    margin:0 20px
}
h1 {
    text-align:center
}
</style>
</head>
<body>
<div id="outer" class="clearfix">
    <div id="content">
        <p>test start</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test last</p>
    </div>
    <div id="header">
        <h1>Sticky Footer</h1>
        <ul id="menu">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </div>
</div>
<div id="footer">Footer</div>
</body>
</html>


Also note that some people who may not be using a regular CSS capable Web browser (as well as those using assistive devices) may become VERY confused if you use such a setup. If you’re thinking this will help you significantly improve your rankings in the search engines, well I hate to say it but it won’t.

Yes as Dan said if this is for SEO then it’s probably not as useful as some make out.

Thanks for your comments so far.

Isn’t it true, that it’s better to have the actual content at the beginning of the HTML. Not only for SE’s, but also for non-css viewers?

For SE’s, the content that is displayed in the search-result will be the header/menu at the description, because it’s on top of the page?
For non-CSS’ers also, they will see the actual content at first instead of the header information incl. all the menu-items?

Not necessarily. If you have a lot of Web pages with lots of content and one of the search engine spiders comes to that page first in your site, it could have trouble indexing the other pages in the site because it will be completely unaware of the menu sitting at the bottom because it was unable to completely index the page. Having an XML sitemap declared in your robots.txt file can help alleviate this problem but it’s not a guaranteed fix.

Not only that but users also expect to have some idea or semblance of where they are on the Web as well, which is why the header is recommended to come before anything else. If you were on a cell phone, would you want to know if you were on CNN.com or some scraper site if you were to suddenly click on a link to what appeared to be a news story?

I have my navigation and such at the bottom of my css for my herbal remedies site and it works great and gets spidered… so… it may not help a lot, but it doesn’t hurt, right? By the way, I purchased the template from someone else and tweaked it.

If the Web page is over 100kb in size it can. Also remember that not everyone has a broadband connection - many are still stuck on dialup.

Ok, a potentially dumb question… how do I know how “big” my web page is?

Sorry for asking such a newbie question.

Save a copy of the HTML source, then right-click or just hover over it. You’ll get an approximation of the file size that way.

Ok, mine is 20.7 kb. I’m guessing I’m ok then.

~Carla

20.7k isn’t all that bad for a webpage, CNN probably has about 60k but that’s just them. My pages tend to be in the area of 25k because I don’t like little content on my pages.