Home/ Questions/Q 705327
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T04:02:27+00:00

I am working on a layout for a new site, and I’m having some

  • 0

I am working on a layout for a new site, and I’m having some trouble achieving what I want with the CSS. First of all, I want everything to always stay within the view of the current browser window, with scroll being in my content and not the browser itself. I have an outermost DIV which acts as my “wrapper” for the site displayed centered, with a set width, and having 100% height of the bowser window. Inside of this I place a header and all of this works as intended in all interested browsers.

However, once I place my actual content DIV inside this “wrapper” I am unable to define it to be the size I want. If I simply give it margins or padding to make up for the header I have absolutely positioned, the content will overflow and I can’t set scroll. And if I try to set the size directly, there are no values I can put in that will work since the margins/padding will add to the size and it will now be bigger than the current browser window, and overflow.

Are there any styles people can think of I can use on the wrapper/content DIV(s) to get the desired look? Here is a diagram illustrating the look I want.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following assumes, that you have a fixed height for your header (not a percentage). This example uses px values to make it easier to inspect with Firebug, but it works the same with em.

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Title</title>

    <style type="text/css">

        html, body {
            margin:0;
            height: 100%;
        }

        #wrapper {
            position:relative;
            width: 400px;
            height: 100%;
            margin: 0 auto 0 auto;
        }
        #header {
            position:absolute;
            margin-top:0;
            height: 70px;
            width: 400px;
            background-color: #ccc;
        }
        #content {
            position: absolute;
            top: 70px;
            bottom: 0;
            width: 400px;
            overflow: auto;
            background-color: #99c;
        }
    </style>

</head>
<body>
    <div id="wrapper">
        <div id="header">Header</div>
        <div id="content">
            Content<br/>
            Content<br/>
            Content<br/>
            Content<br/>
            Content<br/>
            Content
        </div>
    </div>
</body>
</html>

    The important point is, that #content doesn’t use a height at all – it uses a combination of top and bottom instead.

    Note: I’m pretty sure, that modifications will be required for IE 6 …

    • 0