SV: SV: [thelist] HTML Layout [solved]

Marcus Andersson marcan at
Tue Dec 16 06:00:46 CST 2003

> (1) Simple, but needing JavaScript
> body { margin-top: 20px; padding-top: 0; }
> #header { position: fixed; top: 0; left: 0; }
> +
> (2) More complicated

Thanks for the links. I don't like the javascript solution but the "more
complicated" css solution from tagsoup gave me inspiration (solution

>(Of course you could point out that having the header on screen all the

>time is probably a bad idea anyway - users can see it when they first 
>get to the site, they can scroll back to it really quickly, and it eats

>the a segment of their screen space meaning they have to scroll more)

Just helping a friend who is a programmer on a company where they
produce an ERP system. He doesn't have the choice I'm afraid

Thanks to the others who provided proposals to solutions as well.


Solution (for IE only but that didn't matter...):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      body {
        margin: 0;                
        background-color : #ddd;
        font: 100% Arial,Helvetica;
        padding: 20px 0 0 0;        
        overflow-y: hidden;

      div.head {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20px;
        color: #000;
        background: #ffe;
        border-bottom: 1px solid #00f;

      body div.content {
        border-left: 0 none;
        padding: 0 210px 0 30px;
        height: 100%;
        overflow: auto;
    <div class="content">
     lots of content here
    <div class="head">
      Content in the header

More information about the thelist mailing list