Home/ Questions/Q 3782324
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T11:04:01+00:00

http://www.xs4all.nl/~peterned/examples/csslayout1.html The tutorial above is essentially what I want with a white column that

  • 0

http://www.xs4all.nl/~peterned/examples/csslayout1.html

The tutorial above is essentially what I want with a white column that extends to the bottom of the browser. In the tutorial it actually begins at the very top, with the header being a different shade of grey covering the white.

My case, the header would have to match the textured background. So, what I want is to have the container begin below the header. I don’t know if it is possible because right now my header pushes the container down.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://andrew.x10.mx/adam/

    html –

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>for adam</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="header">

    </div>
    <div id="container">
        <br class="push"></br>
        <div id="content">
            <h1>Hi</h1>
        </div>                       
    </div>
</body>
</html>

    css – 

    html,body  {
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

 #header {
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    width:100%;
    height: 49px;
    background: #fff url("bg.png") repeat-x top left;
    padding: 0;  
    }

.push {
    width: 860px;
    height: 49px;
    margin: 0;
    }

#container {
    background: #ff0;
    height:auto !important; 
    height:100%; 
    position:relative;
    width: 860px;
    text-align: left;
    margin: 0 auto;
    min-height:100%; 
    z-index:1;
    }  

#content { padding: 10px; }

    Only tested it in Firefox, though. 🙂

    Updated: feel free to validate. 🙂
    Updated v2: Had a problem when adding content inside the container. Fixed now, but had to do some more complex-ish stuff.

    • 0