Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to extend header in fixed footer (is it possible?)

    Long time lurker here and newbie to html/css.

    So I'm starting to work on some personal stuff for fun and I'm running into a hiccup on my project. And I'm not sure if this can be done or not, so I'm presenting it to more skilled folk.

    1. The example I'm referencing: http://www.css-lab.com/demos/stickfo...t-fixfoot.html

    2. My goals for my personal project: fixed footer but with a "content" area that will stretch the entire vertical distance of the browser window. The example above does that. It's always maximum vertical when you resize the broswer.

    3. My problem: I want only the header area (where the text "Min-Height 100% with Fixed Footer" is) to stretch 100% the width of the browser while still maintaining all of #2 goals.

    4. I've gone through the code several times and I've tried rearranging things, but I can never quite get it. Is it possible? Any pointers?

    Thanks!

    Here's the source, too, by the way:

    Code:
    <!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>Min-Height 100% with Fixed Footer</title>
    
    <style type="text/css">
    html,body {
        height:100%;/*reference for #wrapper min-height:100%*/
    }
    html {
        overflow-y:scroll; /*keep scrollbar position present in FF at all times*/
    }
    body {
        margin:0;
        padding:0;   
        background:#555;
        font:100% arial,helvetica,sans-serif;
        color:#000;
    }
    h1 {
        margin:0;
        font-size:1.5em;
        text-align:center;
    }
    h2 {
        margin:10px 10px 0;
        font-size:1.3em;
    }
    p {margin:10px;}
    
    /*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
    body:before {/*Opera min-height 100% fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*eliminate need for inner non clearing element*/
    }
    #wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /*#content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug*/
        font-size:0;
    }
    
    /*===  Begin Layout Structure ===*/
    #wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
        width:900px;
        min-height:100%;
        margin:0 auto;
        background:#EEF; 
    }
    #header {
        height:100px; /*120px total with padding*/
        padding:10px 0;/*uncollapse child margins with vertical padding*/
        background:#8088C6;
    }
    #content {
        width:100%;/*IE6/7 haslayout for future float containment*/
        padding-bottom:60px;/*set a bottom padding to preserve the footer*/
    }
    #footer {
        position:fixed;
        width:100%;
        left:0;
        bottom:0;
        height:60px;
    }
    .innerfoot {
        width:900px;
        height:60px;
        margin:0 auto;
        overflow:hidden;/*uncollapse child margins*/
        background:#8088C6;
        text-align:center;
    }
    #footer p {
        margin:10px 0 0;
        font-size:1.1em;
        font-weight:bold;
    }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
    #wrapper{height:100%;}/*min-height for IE6*/
    #footer{/*fixed footer for IE6 using expression*/
        position:absolute;
        top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
    }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <h1>Min-Height 100% with Fixed Footer</h1>
        </div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.</p>
            <p>Reduce browser viewport height to scroll content.</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>Last line of test text</p>
        </div>
    </div><!-- end wrapper -->
        <div id="footer">
            <div class="innerfoot">
                <p>Fixed Footer</p>
            </div>
        </div>
    </body>
    </html>
    Last edited by Lambec; 08-03-2012 at 07:44 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Like this?

    I also added a sidemenu

    Code:
    <!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>Min-Height 100% with Fixed Footer</title>
    
    <style type="text/css">
    html,body {
        height:100%;/*reference for #wrapper min-height:100%*/
    }
    html {
        overflow-y:scroll; /*keep scrollbar position present in FF at all times*/
    }
    body {
        margin:0;
        padding:0;   
        background:#555;
        font:100% arial,helvetica,sans-serif;
        color:#000;
    }
    h1 {
        margin:0;
        font-size:1.5em;
        text-align:center;
    }
    h2 {
        margin:10px 10px 0;
        font-size:1.3em;
    }
    p {margin:10px;}
    
    /*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
    body:before {/*Opera min-height 100% fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*eliminate need for inner non clearing element*/
    }
    #wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /*#content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug*/
        font-size:0;
    }
    /*===  Side Menu ===*/
    #side-menu {width:200px; height:462px; margin-right:10px; min-height:100% auto;background:#8088C6;float:left; display:inline; border-right:1px solid #000; overflow:hidden;}
    #side-menu ul {padding:10px; position:relative; top:-27px; left:-10px;}
    #side-menu ul li {padding:10px; width:100%;}
    #side-menu ul li:hover {background:#ccc;}
    #side-menu ul li a:hover {background:#ccc;}
    
    /*===  Begin Layout Structure ===*/
    #wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
        width:100%;
        min-height:100%;
        background:#EEF; 
    }
    #header {
        height:100px; /*120px total with padding*/
        padding:10px 0;/*uncollapse child margins with vertical padding*/
        background:#8088C6;
    	border-bottom:1px solid #000;
    }
    #content {
        width:100%;/*IE6/7 haslayout for future float containment*/
        padding-bottom:60px;/*set a bottom padding to preserve the footer*/
    }
    #footer {
        position:fixed;
        left:0;
    	right:0;
        bottom:0;
        height:60px;
    	width:100%;
    	border-top:1px solid #000;
    }
    .innerfoot {
        width:100%;
        height:60px;
        margin:0 auto;
        overflow:hidden;/*uncollapse child margins*/
        background:#8088C6;
        text-align:center;
    }
    #footer p {
        margin:10px 0 0;
        font-size:1.1em;
        font-weight:bold;
    }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
    #wrapper{height:100%;}/*min-height for IE6*/
    #footer{/*fixed footer for IE6 using expression*/
        position:absolute;
        top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
    }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <h1>Min-Height 100% with Fixed Footer</h1>
        </div>
    	<div id="side-menu">
    	<ul id="nav">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About Us</a></li>
    		<li><a href="#">Downloads</a></li>
    		<li><a href="#">Forum</a></li>
    		<li><a href="#">Quotes</a></li>
    		<li><a href="#">Contact Us</a></li>
    	</ul>	
    	</div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.</p>
            <p>Reduce browser viewport height to scroll content.</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>Last line of test text</p>
        </div>
    </div><!-- end wrapper -->
        <div id="footer">
            <div class="innerfoot">
                <p>Fixed Footer</p>
            </div>
        </div>
    </body>
    </html>
    Preview: http://pastehtml.com/view/c6zyt3ztx.html

  • Users who have thanked tempz for this post:

    Lambec (08-09-2012)

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Close tempz.

    But, I only wanted to extend the header/top area to 100% width while keeping everything else the same. I made a screen shot example.

    I'm trying to learn/understand how to extend the header portion to the full 100% width of the red box in my example: http://www.foolarchy.com/examp/examp3.jpg

    If that's even possible while retaining the fixed footer full vertical functionality.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    This should work :P

    Code:
    <!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>Min-Height 100% with Fixed Footer</title>
    
    <style type="text/css">
    html,body {
        height:100%;/*reference for #wrapper min-height:100%*/
    }
    html {
        overflow-y:scroll; /*keep scrollbar position present in FF at all times*/
    }
    body {
        margin:0;
        padding:0;   
        background:#555;
        font:100% arial,helvetica,sans-serif;
        color:#000;
    }
    h1 {
        margin:0;
        font-size:1.5em;
        text-align:center;
    }
    h2 {
        margin:10px 10px 0;
        font-size:1.3em;
    }
    p {margin:10px;}
    
    /*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
    body:before {/*Opera min-height 100% fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*eliminate need for inner non clearing element*/
    }
    #wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /*#content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug*/
        font-size:0;
    }
    
    
    /*===  Begin Layout Structure ===*/
    #wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
        width:960px auto;
        min-height:100%;
        margin:0 auto;
        /*background:#EEF;*/
    }
    #header {
        height:100px; /*120px total with padding*/
        padding:10px 0;/*uncollapse child margins with vertical padding*/
        background:#8088C6;
    }
    #content {
        width:100%;/*IE6/7 haslayout for future float containment*/
        padding-bottom:60px;/*set a bottom padding to preserve the footer*/
    	width:900px;
    	margin:0 auto;
    	background:#EEF;
    	height:100%;
    	padding-top:10px;
    }
    #footer {
        position:fixed;
        width:100%;
        left:0;
        bottom:0;
        height:60px;
    }
    .innerfoot {
        width:900px;
        height:60px;
        margin:0 auto;
        overflow:hidden;/*uncollapse child margins*/
        background:#8088C6;
        text-align:center;
    }
    #footer p {
        margin:10px 0 0;
        font-size:1.1em;
        font-weight:bold;
    }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
    #wrapper{height:100%;}/*min-height for IE6*/
    #footer{/*fixed footer for IE6 using expression*/
        position:absolute;
        top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
    }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <h1>Min-Height 100% with Fixed Footer</h1>
        </div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.</p>
            <p>Reduce browser viewport height to scroll content.</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>Last line of test text</p>
        </div>
    </div><!-- end wrapper -->
        <div id="footer">
            <div class="innerfoot">
                <p>Fixed Footer</p>
            </div>
        </div>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay so it's not just me. I've tried similar things (though not quiet as skilled) and I kept ending up with quirks.

    Whenever I successfully manipulated the header to 100% width, I'd lose the functionality of full vertical content area :/ it's stumping me.

    With your latest change, it went wonky also. See example: http://www.foolarchy.com/examp/examp4.jpg

    The area in the red is no longer functioning. It should have same background color as the bit above it.

    It's kicking my butt! (But I do appreciate your attempts tempz!)

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you want the header to extend across the full width of the viewport (if I understand correctly) then you need to take it outside the wrapper, and perhaps remove the wrapper entirely.

    I would start with a more basic example and not worry about all the IE fixes ; they can be re-inserted later.

    Code:
    <!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>Min-Height 100% with Fixed Footer</title>
    
    <style type="text/css">
    html, body {
        height: 100%;
        min-height: 100%;
    }
    #header {
        width: 100%;
        background-color: lightgray;
    }
    #header h1 {
        width: 900px;
        margin: 0 auto; background: blue;
    }
    #content {
        height: 100%;
        min-height: 100%;
        width: 900px;
        margin: 0 auto;
        background-color: gray;
    }
    #footer {
        position: fixed;
        bottom: 0; left: 0;
        width: 100%; height: 60px;
        background-color: lightblue;
    }
    </style>
    
    
    
    </head>
    <body>
        <div id="header">
            <h1>Min-Height 100% with Fixed Footer</h1>
        </div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.</p>
            <p>Reduce browser viewport height to scroll content.</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>Last line of test text</p>
        </div>
    
        <div id="footer">
            <div class="innerfoot">
                <p>Fixed Footer</p>
            </div>
        </div>
    </body>
    </html>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I have a gap at the top but it is caused by the margin on the h2 within the content. I fixed it by swapping the margin for padding:

    Code:
    #content h2 {
        margin-top: 0px;
        padding-top: 20px;
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    It's do with the height on content style.

    Code:
    <!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>Min-Height 100% with Fixed Footer</title>
    
    <style type="text/css">
    html,body {
        height:100%;/*reference for #wrapper min-height:100%*/
    }
    html {
        overflow-y:scroll; /*keep scrollbar position present in FF at all times*/
    }
    body {
        margin:0;
        padding:0;   
        background:#555;
        font:100% arial,helvetica,sans-serif;
        color:#000;
    }
    h1 {
        margin:0;
        font-size:1.5em;
        text-align:center;
    }
    h2 {
        margin:10px 10px 0;
        font-size:1.3em;
    }
    p {margin:10px;}
    
    /*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
    body:before {/*Opera min-height 100% fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*eliminate need for inner non clearing element*/
    }
    #wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /*#content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug*/
        font-size:0;
    }
    
    
    /*===  Begin Layout Structure ===*/
    #wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
        width:960px auto;
        min-height:100%;
        margin:0 auto;
        /*background:#EEF;*/
    }
    #header {
        height:100px; /*120px total with padding*/
        padding:10px 0;/*uncollapse child margins with vertical padding*/
        background:#8088C6;
    }
    #content {
        width:100%;/*IE6/7 haslayout for future float containment*/
        padding-bottom:60px;/*set a bottom padding to preserve the footer*/
    	width:900px;
    	margin:0 auto;
    	background:#EEF;
    	height:750px; /* This is the issue */
    	padding-top:10px;
    }
    #footer {
        position:fixed;
        width:100%;
        left:0;
        bottom:0;
        height:60px;
    }
    .innerfoot {
        width:900px;
        height:60px;
        margin:0 auto;
        overflow:hidden;/*uncollapse child margins*/
        background:#8088C6;
        text-align:center;
    }
    #footer p {
        margin:10px 0 0;
        font-size:1.1em;
        font-weight:bold;
    }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
    #wrapper{height:100%;}/*min-height for IE6*/
    #footer{/*fixed footer for IE6 using expression*/
        position:absolute;
        top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
    }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <h1>Min-Height 100% with Fixed Footer</h1>
        </div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.</p>
            <p>Reduce browser viewport height to scroll content.</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>Last line of test text</p>
        </div>
    </div><!-- end wrapper -->
        <div id="footer">
            <div class="innerfoot">
                <p>Fixed Footer</p>
            </div>
        </div>
    </body>
    </html>

  • #9
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried your style AndrewGSW and I still end up with quirks. (granted I picked up a little understanding of some other things that were confusing to me).

    Here's my example based off yours:

    Code:
    <!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>Min-Height 100% with Fixed Footer</title>
    
    <style type="text/css">
    html, body {
    	margin:0;
        padding:0;   
        height: 100%;
        min-height: 100%;
    	background-color: rgb(115, 115, 115);
    }
    #header {
        width: 100%;
        background-color: rgb(56, 43, 26);
    }
    #header h1 {
        width: 900px;
        margin: 0 auto;
    	background-color: rgb(56, 43, 26);
    }
    #content {
        height: 100%;
        min-height: 100%;
        width: 900px;
        margin: 0 auto;
        background-color: rgb(110, 94, 68);
    }
    #content h2 {
        margin-top: 0px;
        padding-top: 20px;
    }
    #footer {
        position: fixed;
        bottom: 0; left: 0;
        width: 100%; height: 60px;
        background-color: rgb(115, 115, 115);
    }
    #footer h6 {
    	width: 900px;
    	margin: 0 auto;
    	background-color: rgb(110, 94, 68);
    }
    </style>
    
    
    
    </head>
    <body>
        <div id="header">
            <h1>Min-Height 100% with Fixed Footer</h1>
        </div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.</p>
            <p>Reduce browser viewport height to scroll content.</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>Last line of test text</p>
        </div>
        
        <div id="footer">
        	<h6>This is the fixed footer area</h6>
        </div>
    	
        <!--
        <div id="footer">
            <div class="innerfoot">
                <p>Fixed Footer</p>
            </div>
        </div>
        -->
    </body>
    </html>
    The problem seems the same though, now the "tan" in the middle will not automagically stretch to the bottom of the browser (which is my end goal if possible).

    Is it possible that it's simply not possible?

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your code version works for me, but my screen resolution is a lot lower than yours I believe. Nevertheless, even if I delete all the content-p's it still stretches to the bottom of the viewport.

    Hint: use more distinctive colours during initial development, and make use of

    Code:
    outline: 1px solid #FF0000;
    so you can see the boundaries of the elements.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Another, and perhaps better approach, is to create a faux column.

    Create an image which is the width of your main content area (900px) and 1 or 2 pixels tall - but is just a single colour. That is, the same colour as the background to your content area. Any image editor should be able to do this.

    Set this image as the background to your body:

    Code:
    html, body {
        height: 100%;
        min-height: 100%;
    }
    body {
        background: url('images/greenback.gif') center top repeat-y;
    }
    The advantages are:

    you don't have to worry about the height of your content area;
    it won't matter if there is a gap above, or below, your content area, as the body-background will show in these gaps;
    you can be sure that this background will appear behind anything else on the page;
    it's more likely to work cross-browser. Well, apart from naff IE versions.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Lambec (08-09-2012)

  • #12
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wanted to say thanks to you two. All this information eventually did help me to solve my layout challenge.

    Next up a layering challenge, but that's several days away still. Thanks!


  •  

    Posting Permissions

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