CSS layout with Source ordered Content

Question

Beginning to wonder if I am missing something obvious but I have been searching for days now and still haven't been able to find a definitive answer.

What I am looking for is a Source ordered Content CSS layout for a two column page (menu to right) with header and sticky footer, and preferably no nasty hacks. Preferable Source order of:
{content}
{rightmenu}
{footer}
{header}

Like I say I'm not getting too far in trying to build this for myself, nor have I been able to find a suitable example anywhere. Any suggestions?

Thanks

Why do you want the header last in the source code? Please don't say SEO. — thirtydot, Mar 21 '11 at 15:07
Despite me feeling that this is rather pointless: if you draw a picture showing where the different elements should go, I'll create a layout that looks the same. — thirtydot, Mar 21 '11 at 16:40
while I don't believe putting a site logo or h1 down the bottom is a great idea, I think there could be legitimate reasons to put some of the header down bottom, a large dropdown for example is often better at the bottom for usability for users not just SE's ;) — clairesuzy, Mar 21 '11 at 16:58

score 1 · Answer 1 · answered Mar 21 '11 at 16:53

content right, with sidebar left is perhaps the easiest floated layout to make, just float the content right with a width, let the left fill the space with overflow to avoid wrapping. footer goes below by clearing.

As for the header put a fake header div first in the source, presuming there may be a logo or something to go in it, even though you might not want hordes of links up there if there is a big dropdown menu to go in there or something like that. Anyway I'd make the "fake" header tall enough to create the space you need then put any actual content in it, then put the content you want to appear top only in a div at the bottom and absolutely position it.

here's a fiddled mockup

Thanks. Have now got a working prototype. Will post that as a separate answer as I can't see how to add it to this. — NickC, Mar 21 '11 at 19:57

score 1 · Answer 2 · edited Mar 23 '11 at 12:02

This is the best I can come up with at the moment. Bit of a mixture of relative and absolute positioning but seems to work. Can anyone see any problems with this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
    <head>
        <style>
            * {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .container {
    min-height: 100%;
    /*height: auto !important;*/
    height: 100%;
    margin: 0 auto -2em;
    }
    .content{
    float: left;
    width: 80%;
    }
    .menu{
    margin-left: 80%;
    }
    .header{
    position: absolute;
    top: 0px;
    height: 3em;
    width: 100%;
    }
   .clearheader{
    height: 3em;
    }
   .footer, .clearfooter {
   height: 2em;
   clear: both;
   }

   .container {
    background: grey;
    }
   .header{
    background: cyan;
    }
    .clearheader{
    background: cyan;
    }
    .footer{
    background: blue;
    }
    .clearfooter {
    background: lightblue;
    }

        </style>
        <link rel="stylesheet" href="NJC layout2.css" ... />
    </head>
    <body>
        <div class="container">
            <div class="clearheader"></div>
            <div class="content">Content</div>
            <div class="menu">menu</div>
            <div class="clearfooter"></div>
        </div>
        <div class="header">header</div>
        <div class="footer">Footer</div>
    </body>
</html>

score 0 · Answer 3 · answered Mar 21 '11 at 15:02

0

If I understand your question right, this should be your answer:

http://www.positioniseverything.net/ordered-floats.html

I actually think this article is explaining everything quite nice.

answered Mar 21 '11 at 15:02

Dennis Lauritzen

404
3
7
21

Thanks Dennis, interesting article. That answers left/right columns, albeit I was already doing that bit with float: left; / float: right; Difficult bit seems to be getting a source ordered header to float at the top correctly – NickC Mar 21 '11 at 15:53
I actually think the clear-attribute is quite interesting in this perspective. It is also interesting to look at the float-attribute. You should try having more than one element floating right - not always logical! ;) But having two elements floating left and one right is probably the right way. Else you can have a container with 100% width and let that div "contain" the three columns and make it float left. Then make your footer the same width and floating left. – Dennis Lauritzen Mar 21 '11 at 20:24
If you have any questions, then let me know :-) – Dennis Lauritzen Mar 21 '11 at 20:25

CSS layout with Source ordered Content

3 Answers3

Linked