CSS layout with Source ordered Content_问答_开发者

开发者 https://www.devze.com 2023-02-17 23:37 出处：网络

Beginning to wonder if I am missing something obvious but I have bee开发者_StackOverflow中文版n searching for days now and still haven\'t been able to find a definitive answer.

相关专题：css

Beginning to wonder if I am missing something obvious but I have bee开发者_StackOverflow中文版n 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

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

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>

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.