SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    full-width header, fixed-width, full-height content area

    I'm trying to create a layout that has a full-width header and a fixed-width, centered main content area with 100% height.

    The problem is that if I assign height as follows...

    Code:
    html, body  {height:100% }
    #header {height: 100px}
    #mainContent {min-height:100% }
    the height of div#mainContent will equal that of the body -- but since it begins beneath the header, it extends 100px beneath the viewport and forces an unecessary scrollbar. I can overcome this problem by absolutely positioning the div#header on top of the div#mainContent but I would rather not do that.

    Is there a way to accopmlish this without pushing the main content area beneath the viewport and without using positioning? (also note that I cannot make the main content area part of the background image due to the design requirements).

    Can this be done with negative margins? I've so far been unsuccessful in my attempts.

    Thanks for any suggestions.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It can be done, e.g. like this
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    html,
    body{ margin:0; padding:0; height:100%; min-width:760px; text-align:center}
     
    #header {
    	position:relative;  /* give header a stacking higher than mainContent */
    	height:100px;
    	background: #cff url() center;
    }
    #mainContent {
    	margin:-100px auto 0; /* pull down header */
    	width:760px;
    	min-height:100%;
    	background: #ffc;
    }
    * html #wrapper{ height:100%}
     
    #content{
    	padding:100px 0 50px; /* header and footer space */
    }
    #footer{
    	margin:-50px 0;  /* pull up footer */
    	height:50px;
    	background: #fcf url() center;
    }
    </style>
    </head>
    <body>
    <div id="header">Header</div>
    <div id="mainContent">
    	<div id="content">Content</div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks Eric. This does the job nicely.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm curious Eric...is there a particular reason why you chose to use a html 4-strict doctype instead of an xhtml doctype?

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This helped me get my header full


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •