ansaurus

Question

Help with inner content box margins/padding

Answer 1

A:

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 ...

Chris Lercher 2010-03-29 00:57:54

Thanks! This actually looks the way I want in all but IE6 (which I'm not too worried about now that IE8 is gaining traction). I never knew you could specify both top and bottom for positioning. I had assumed one would override the other, instead of working together.

Wolfgang 2010-03-29 05:33:26

Just a side-note: this requires a `<!DOCTYPE>` in order to render correctly in IE7+.

Wolfgang 2010-03-30 04:07:26

Answer 2

A:

<style>
html, body {
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden; // prevents scroll bars in browser window}
#content_wrap {
    width: 800px; // set this to whatever you want
    margin: 0 auto; // centers the div
    text-align: left; 
    height: 100%; 
    position: relative; // basis for absolute positioning}
#header {
    position: absolute; 
    top: 0; 
    left: 20px; 
    width: 760px;}
#content {
    position: absolute; 
    left: 0; 
    top: 20%; 
    height: 80%; 
    overflow: scroll; 
    overflow-x: hidden;}
</style>

The challenge with this approach, and any that I can think of, is that without CSS expressions, you can't make the #content div height extend to the bottom of the screen except as a percentage. The trouble with this is that your header will not have a fixed amount of room in which to work. There's no CSS representation for your ideal "#content div should have 200px margin on the top and extend to the bottom of the page" set of attributes.

You could do this easily with JS, however.

Steven Xu 2010-03-29 01:00:25

ansaurus

tags:

views:

answers:

Help with inner content box margins/padding

related questions