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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fluid shadow + 100% Height + Sticky footer

    Having some problems... I managed to mix and match some CSS to get the layout and design effects I want.

    What I want is fluid shadow, 100% height, and a sticky footer. Here's what I'm aiming at, and I managed to get it working.

    http://www.dizzytechnology.com/projects/pic1.png

    However, here's what happens when the content extends beyond the viewport.

    http://www.dizzytechnology.com/projects/pic2.png

    Here's what happens without the 100% height with content less than the viewport. It works fine with longer content.

    http://www.dizzytechnology.com/projects/pic3.png

    How would I fix this?

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I assume you're using the sticky footer method described here?

    Post all your code (in [CODE][/CODE] tags) or a link to your page and we'll sort it out.
    matt | design | blog

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello zwaldowski,
    The sticky-footer technique is supposed to move the footer down when the content gets longer. See my examples both with and without text - http://nopeople.com/CSS/full-height-layout/index.html

    To get your footer and header to stay in the viewport and your content to scroll is another layout.

    Maybe this is more what your after - http://limpid.nl/lab/css/fixed/header-and-footer
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @msuffern: Yeah, that's exactly the thing. Here's the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head><title>100% Height CSS Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    * {
    	margin: 0;
    }
    html, body {
    	height: 100%;
    }
    body {
    width:650px;
    margin: 0 auto;
    background: #8F9191;
    }
    
    .class1{height: 100%;padding: 0 0 0 20px;background: url(bg_left.gif);}
    
    .class2{height: 100%;padding: 0 19px 0 0;background: url(bg_right.gif) repeat-y top right;}
    .wrapper {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -28px; /* the bottom margin is the negative value of the footer's height */
    	border: 0 none;
    	background: #ccc;
    }
    .wrapper p {
    padding: 5px;
    }
    .push {
    	height: 28px;
    }
    .footer {
    padding: 0 5px;background:url(cellpic3.gif);
    border-bottom: 2px solid #0066cc;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #666666;color: #ffffff;
    font-size: 11px;
    padding-top:7px;
    height:18px;
    margin-bottom: 0pt;
    margin-top: auto;
    text-align: left;
    }
    /*
    
    Sticky Footer by Ryan Fait
    http://ryanfait.com/
    
    */
    </style>
    </head>
    <body>
    <div class="class1">
    <div class="class2">
    
             <div class="wrapper">
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <div class="push"></div>
             </div>
             <div class="footer">
                 <p>Copyright (c) 2008</p>
             </div>
    </div> 
    </div>
    </body>
    </html>
    It's very rough, I know, I'm still new to HTML and clean things up later in devel. This is just a test layout for a theme I'm doing. I also feel I need to justify a little where I am: the layout used to work fine with the whole content, but content shorter than the viewport got a very ugly and abrupt end.

    @Excavator: The first looks exactly like what I'm after, but the shadows is really what's kicking my ***. The second looks helpful, though, I'll experiment with that.

    I really don't need the footer to be stick, I just thought it would be helpful if the shadow effect continued forever (and, therefore, the footer wouldn't really logically look like it's at the bottom of the page, only at the bottom of the content).
    Last edited by zwaldowski; 02-13-2009 at 10:17 PM.

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Have a go with this, with the attached image used as a background:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head><title>100% Height CSS Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    
    	* {
    		margin: 0;
    	}
    	
    	html, body {
    		height: 100%;
    	}
    	
    	body {
    		background: #8F9191;
    	}
    	.wrapper {
    		width:650px;
    		min-height: 100%;
    		height: auto !important;
    		height: 100%;
    		margin: 0 auto -28px; /* the bottom margin is the negative value of the footer's height */
    		background: url(bg1.png) repeat-y;
    	}
    	
    	.wrapper p {
    		padding:5px 15px;
    	}
    	
    	.push {
    		height: 28px;
    	}
    	
    	.footer {
    		width:630px;
    		margin:0 auto;
    		border-bottom: 2px solid #0066cc;
    		border-top-width: 1px;
    		border-top-style: solid;
    		border-top-color: #666666;color: #ffffff;
    		font-size: 11px;
    		padding-top:7px;
    		height:18px;
    		text-align: left;
    	}
    /*
    
    Sticky Footer by Ryan Fait
    http://ryanfait.com/
    
    */
    </style>
    </head>
    <body>
    
    <!-- Removed two "shadow divs" from here -->
    
             <div class="wrapper">
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <p>Your website content here.</p>
                 <div class="push"></div>
             </div>
             <div class="footer">
                 <p>Copyright (c) 2008</p>
             </div>
    </div> 
    </div>
    </body>
    </html>
    Don't center the body, center #wrapper and #footer independently. The background is now on #wrapper and one piece instead of two.
    Attached Thumbnails Attached Thumbnails Fluid shadow + 100% Height + Sticky footer-bg1.png  
    matt | design | blog

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aw, jeez... made myself look like an idiot. I only set it to a static width to help with the testing (borders, padding, and such). I intend for it to be fluid. Sorry... *smacks forehead*

  • #7
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Second verse... really same as the first. Or, rather, my original problem's back. Excavator, that first site you linked me to gave me exactly what I wanted... or so I thought. My original problem is back; the shadow ends after the viewport when the content is longer.

    Here's some pics:
    Shorter than viewport - http://www.dizzytechnology.com/projects/pic4.png
    Longer than viewport - http://www.dizzytechnology.com/projects/pic5.png

    And, my code, for all to see:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Shadow + sticky test</title>
    <style type="text/css">
    html {
    	height: 100%;
    }
    body{
    	margin: 0 auto;
    	height: 100%;
    	text-align: center;
    	font-family: Verdana,Arial,Helvetica,sans-serif;
    	font-size: 12px;
    	background: #8F9191;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #shadow-left {
    	padding: 0 0 0 20px;
    	height: 100%;
    	background: url(bg_left.gif) repeat-y top left;
    }
    #shadow-right {
    	height: 100%;
    	padding: 0 19px 0 0;
    	background: url(bg_right.gif) repeat-y top right;
    }
    #wrapper {
    	width: 100%;
    	min-height: 100%;
    	margin: 0 auto;
    	text-align: left;
    	background: #ccc;
    }
    * html #wrapper {
    	height: 100%
    }
    #header {
    	width: 100%;
    	height: 89px;
    	background-color: #666666;
    }
    #content {
    	margin: 0;
    	padding: 5px 0 32px 0;
    }
    #footer {
    	height: 18px;
    	clear: both;
    	margin: -28px auto 0 auto;
    	background:url(cellpic3.gif);
    	padding: 7px 5px 0 5px;
    	color:#fff;
    	text-align:left;
    	border-bottom: 2px solid #0066cc;
    	border-top: 1px solid #666666;
    }
    /*  Just demo formatting */
    p {
    margin: 10px 5px;
    }
    
    </style>
    </head>
    <body>
    <div id="shadow-left">
    	<div id="shadow-right">
    		<div id="wrapper">
    			<div id="header"></div>
    			<div id="content">
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies tortor. Etiam varius. Suspendisse nec nisl pretium odio tempus dignissim. Proin euismod eros. Aliquam nec metus. In hac habitasse platea dictumst. Maecenas tincidunt. Suspendisse arcu eros, commodo et, accumsan a, tempor vel, mi. Etiam est ligula, egestas in, ullamcorper eu, fringilla et, felis. Donec malesuada, nunc nec vulputate gravida, magna metus aliquet nulla, a lobortis ligula neque nec augue. Nunc imperdiet augue nec mi. Integer et orci. Sed non ante sed ligula facilisis pulvinar. Fusce eu elit id tortor scelerisque semper. Sed enim sapien, venenatis non, pellentesque nec, malesuada a, pede. Fusce non nunc faucibus sem hendrerit iaculis. Ut bibendum dui eget urna. Etiam ut nulla quis lorem imperdiet volutpat. Maecenas sit amet enim at eros blandit tempus. Proin lorem eros, pellentesque sed, semper in, pulvinar nec, nulla.</p>
    				<p>Sed commodo libero posuere sapien. Proin porttitor. Praesent varius lectus eu dui. Nam eu metus sit amet dolor consectetur sagittis. Morbi fermentum consectetur felis. Ut ut nibh. Donec vitae nunc eu massa consectetur molestie. Duis risus urna, ornare et, placerat id, bibendum sed, urna. Duis imperdiet convallis dolor. Fusce pulvinar leo quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pretium pellentesque mauris. Duis sapien lorem, facilisis at, fringilla nec, blandit at, mauris. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet sapien ac nibh. Pellentesque enim dui, porta nec, viverra sed, aliquet in, turpis.</p>
    				<p>Cras pede lectus, imperdiet ac, vulputate eget, convallis sodales, nunc. Aliquam erat volutpat. Maecenas sed magna a quam varius pellentesque. Quisque felis dolor, feugiat ac, scelerisque rutrum, facilisis in, augue. Sed sodales tincidunt felis. Nam interdum. Etiam dapibus, velit vel mollis laoreet, tellus enim pulvinar diam, vitae tempor lectus tortor non risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc rhoncus consectetur odio. Mauris bibendum est. Vivamus purus.</p>
    				<p>Quisque risus elit, dignissim tincidunt, elementum a, luctus sed, nunc. Donec imperdiet nisl porta tortor. Quisque vulputate enim in dui. Suspendisse placerat pulvinar diam. Suspendisse potenti. Nunc tortor diam, commodo in, tempor vitae, volutpat non, velit. Donec sit amet dui. Donec consectetur pede vel dui. Suspendisse id nisl ac nunc aliquam vehicula. Vivamus placerat faucibus dui. Maecenas consequat laoreet felis. Aliquam erat volutpat. Etiam semper lacinia nulla. Suspendisse pellentesque mauris vehicula eros. Fusce mattis mauris non massa.</p>
    				<p>Phasellus fringilla purus et elit. In hac habitasse platea dictumst. Curabitur a nisi. Phasellus aliquet suscipit lectus. Fusce pellentesque. Proin sed augue ac metus placerat posuere. Etiam posuere, nisl in tempus volutpat, neque neque accumsan metus, et lobortis quam massa in massa. Donec risus tellus, eleifend pretium, vestibulum venenatis, pellentesque ut, lectus. Morbi at erat vitae mauris vulputate lacinia. Donec molestie leo quis odio. Nam sit amet nibh eu neque lobortis tempus. Pellentesque venenatis, enim id dapibus venenatis, mauris urna sollicitudin enim, et venenatis purus lorem eget massa. Phasellus lacus. Maecenas interdum orci ut mauris. Morbi quis erat vel lacus vestibulum cursus. In scelerisque erat ut est. Ut nec odio sit amet odio feugiat porta. Mauris consectetur ante ut ante. </p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies tortor. Etiam varius. Suspendisse nec nisl pretium odio tempus dignissim. Proin euismod eros. Aliquam nec metus. In hac habitasse platea dictumst. Maecenas tincidunt. Suspendisse arcu eros, commodo et, accumsan a, tempor vel, mi. Etiam est ligula, egestas in, ullamcorper eu, fringilla et, felis. Donec malesuada, nunc nec vulputate gravida, magna metus aliquet nulla, a lobortis ligula neque nec augue. Nunc imperdiet augue nec mi. Integer et orci. Sed non ante sed ligula facilisis pulvinar. Fusce eu elit id tortor scelerisque semper. Sed enim sapien, venenatis non, pellentesque nec, malesuada a, pede. Fusce non nunc faucibus sem hendrerit iaculis. Ut bibendum dui eget urna. Etiam ut nulla quis lorem imperdiet volutpat. Maecenas sit amet enim at eros blandit tempus. Proin lorem eros, pellentesque sed, semper in, pulvinar nec, nulla.</p>
    				<p>Sed commodo libero posuere sapien. Proin porttitor. Praesent varius lectus eu dui. Nam eu metus sit amet dolor consectetur sagittis. Morbi fermentum consectetur felis. Ut ut nibh. Donec vitae nunc eu massa consectetur molestie. Duis risus urna, ornare et, placerat id, bibendum sed, urna. Duis imperdiet convallis dolor. Fusce pulvinar leo quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pretium pellentesque mauris. Duis sapien lorem, facilisis at, fringilla nec, blandit at, mauris. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet sapien ac nibh. Pellentesque enim dui, porta nec, viverra sed, aliquet in, turpis.</p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies tortor. Etiam varius. Suspendisse nec nisl pretium odio tempus dignissim. Proin euismod eros. Aliquam nec metus. In hac habitasse platea dictumst. Maecenas tincidunt. Suspendisse arcu eros, commodo et, accumsan a, tempor vel, mi. Etiam est ligula, egestas in, ullamcorper eu, fringilla et, felis. Donec malesuada, nunc nec vulputate gravida, magna metus aliquet nulla, a lobortis ligula neque nec augue. Nunc imperdiet augue nec mi. Integer et orci. Sed non ante sed ligula facilisis pulvinar. Fusce eu elit id tortor scelerisque semper. Sed enim sapien, venenatis non, pellentesque nec, malesuada a, pede. Fusce non nunc faucibus sem hendrerit iaculis. Ut bibendum dui eget urna. Etiam ut nulla quis lorem imperdiet volutpat. Maecenas sit amet enim at eros blandit tempus. Proin lorem eros, pellentesque sed, semper in, pulvinar nec, nulla.</p>
    				<p>Sed commodo libero posuere sapien. Proin porttitor. Praesent varius lectus eu dui. Nam eu metus sit amet dolor consectetur sagittis. Morbi fermentum consectetur felis. Ut ut nibh. Donec vitae nunc eu massa consectetur molestie. Duis risus urna, ornare et, placerat id, bibendum sed, urna. Duis imperdiet convallis dolor. Fusce pulvinar leo quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pretium pellentesque mauris. Duis sapien lorem, facilisis at, fringilla nec, blandit at, mauris. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet sapien ac nibh. Pellentesque enim dui, porta nec, viverra sed, aliquet in, turpis.</p>
    				<p>Cras pede lectus, imperdiet ac, vulputate eget, convallis sodales, nunc. Aliquam erat volutpat. Maecenas sed magna a quam varius pellentesque. Quisque felis dolor, feugiat ac, scelerisque rutrum, facilisis in, augue. Sed sodales tincidunt felis. Nam interdum. Etiam dapibus, velit vel mollis laoreet, tellus enim pulvinar diam, vitae tempor lectus tortor non risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc rhoncus consectetur odio. Mauris bibendum est. Vivamus purus.</p>
    				<p>Quisque risus elit, dignissim tincidunt, elementum a, luctus sed, nunc. Donec imperdiet nisl porta tortor. Quisque vulputate enim in dui. Suspendisse placerat pulvinar diam. Suspendisse potenti. Nunc tortor diam, commodo in, tempor vitae, volutpat non, velit. Donec sit amet dui. Donec consectetur pede vel dui. Suspendisse id nisl ac nunc aliquam vehicula. Vivamus placerat faucibus dui. Maecenas consequat laoreet felis. Aliquam erat volutpat. Etiam semper lacinia nulla. Suspendisse pellentesque mauris vehicula eros. Fusce mattis mauris non massa.</p>
    				<p>Phasellus fringilla purus et elit. In hac habitasse platea dictumst. Curabitur a nisi. Phasellus aliquet suscipit lectus. Fusce pellentesque. Proin sed augue ac metus placerat posuere. Etiam posuere, nisl in tempus volutpat, neque neque accumsan metus, et lobortis quam massa in massa. Donec risus tellus, eleifend pretium, vestibulum venenatis, pellentesque ut, lectus. Morbi at erat vitae mauris vulputate lacinia. Donec molestie leo quis odio. Nam sit amet nibh eu neque lobortis tempus. Pellentesque venenatis, enim id dapibus venenatis, mauris urna sollicitudin enim, et venenatis purus lorem eget massa. Phasellus lacus. Maecenas interdum orci ut mauris. Morbi quis erat vel lacus vestibulum cursus. In scelerisque erat ut est. Ut nec odio sit amet odio feugiat porta. Mauris consectetur ante ut ante. </p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies tortor. Etiam varius. Suspendisse nec nisl pretium odio tempus dignissim. Proin euismod eros. Aliquam nec metus. In hac habitasse platea dictumst. Maecenas tincidunt. Suspendisse arcu eros, commodo et, accumsan a, tempor vel, mi. Etiam est ligula, egestas in, ullamcorper eu, fringilla et, felis. Donec malesuada, nunc nec vulputate gravida, magna metus aliquet nulla, a lobortis ligula neque nec augue. Nunc imperdiet augue nec mi. Integer et orci. Sed non ante sed ligula facilisis pulvinar. Fusce eu elit id tortor scelerisque semper. Sed enim sapien, venenatis non, pellentesque nec, malesuada a, pede. Fusce non nunc faucibus sem hendrerit iaculis. Ut bibendum dui eget urna. Etiam ut nulla quis lorem imperdiet volutpat. Maecenas sit amet enim at eros blandit tempus. Proin lorem eros, pellentesque sed, semper in, pulvinar nec, nulla.</p>
    				sectetur adipiscing elit. Nam bibendum ultricies tortor. Etiam varius. Suspendisse nec nisl pretium odio tempus dignissim. Proin euismod eros. Aliquam nec metus. In hac habitasse platea dictumst. Maecenas tincidunt. Suspendisse arcu eros, commodo et, accumsan a, tempor vel, mi. Etiam est ligula, egestas in, ullamcorper eu, fringilla et, felis. Donec malesuada, nunc nec vulputate gravida, magna metus aliquet nulla, a lobortis ligula neque nec augue. Nunc imperdiet augue nec mi. Integer et orci. Sed non ante sed ligula facilisis pulvinar. Fusce eu elit id tortor scelerisque semper. Sed enim sapien, venenatis non, pellentesque nec, malesuada a, pede. Fusce non nunc faucibus sem hendrerit iaculis. Ut bibendum dui eget urna. Etiam ut nulla quis lorem imperdiet volutpat. Maecenas sit amet enim at eros blandit tempus. Proin lorem eros, pellentesque sed, semper in, pulvinar nec, nulla.</p>
    				<p>Sed commodo libero posuere sapien. Proin porttitor. Praesent varius lectus eu dui. Nam eu metus sit amet dolor consectetur sagittis. Morbi fermentum consectetur felis. Ut ut nibh. Donec vitae nunc eu massa consectetur molestie. Duis risus urna, ornare et, placerat id, bibendum sed, urna. Duis imperdiet convallis dolor. Fusce pulvinar leo quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pretium pellentesque mauris. Duis sapien lorem, facilisis at, fringilla nec, blandit at, mauris. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet sapien ac nibh. Pellentesque enim dui, porta nec, viverra sed, aliquet in, turpis.</p>
    				<p>Cras pede lectus, imperdiet ac, vulputate eget, convallis sodales, nunc. Aliquam erat volutpat. Maecenas sed magna a quam varius pellentesque. Quisque felis dolor, feugiat ac, scelerisque rutrum, facilisis in, augue. Sed sodales tincidunt felis. Nam interdum. Etiam dapibus, velit vel mollis laoreet, tellus enim pulvinar diam, vitae tempor lectus tortor non risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc rhoncus consectetur odio. Mauris bibendum est. Vivamus purus.</p>
    				<p>Quisque risus elit, dignissim tincidunt, elementum a, luctus sed, nunc. Donec imperdiet nisl porta tortor. Quisque vulputate enim in dui. Suspendisse placerat pulvinar diam. Suspendisse potenti. Nunc tortor diam, commodo in, tempor vitae, volutpat non, velit. Donec sit amet dui. Donec consectetur pede vel dui. Suspendisse id nisl ac nunc aliquam vehicula. Vivamus placerat faucibus dui. Maecenas consequat laoreet felis. Aliquam erat volutpat. Etiam semper lacinia nulla. Suspendisse pellentesque mauris vehicula eros. Fusce mattis mauris non massa.</p>
    				<p>Phasellus fringilla purus et elit. In hac habitasse platea dictumst. Curabitur a nisi. Phasellus aliquet suscipit lectus. Fusce pellentesque. Proin sed augue ac metus placerat posuere. Etiam posuere, nisl in tempus volutpat, neque neque accumsan metus, et lobortis quam massa in massa. Donec risus tellus, eleifend pretium, vestibulum venenatis, pellentesque ut, lectus. Morbi at erat vitae mauris vulputate lacinia. Donec molestie leo quis odio. Nam sit amet nibh eu neque lobortis tempus. Pellentesque venenatis, enim id dapibus venenatis, mauris urna sollicitudin enim, et venenatis purus lorem eget massa. Phasellus lacus. Maecenas interdum orci ut mauris. Morbi quis erat vel lacus vestibulum cursus. In scelerisque erat ut est. Ut nec odio sit amet odio feugiat porta. Mauris consectetur ante ut ante. </p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ultricies tortor. Etiam varius. Suspendisse nec nisl pretium odio tempus dignissim. Proin euismod eros. Aliquam nec metus. In hac habitasse platea dictumst. Maecenas tincidunt. Suspendisse arcu eros, commodo et, accumsan a, tempor vel, mi. Etiam est ligula, egestas in, ullamcorper eu, fringilla et, felis. Donec malesuada, nunc nec vulputate gravida, magna metus aliquet nulla, a lobortis ligula neque nec augue. Nunc imperdiet augue nec mi. Integer et orci. Sed non ante sed ligula facilisis pulvinar. Fusce eu elit id tortor scelerisque semper. Sed enim sapien, venenatis non, pellentesque nec, malesuada a, pede. Fusce non nunc faucibus sem hendrerit iaculis. Ut bibendum dui eget urna. Etiam ut nulla quis lorem imperdiet volutpat. Maecenas sit amet enim at eros blandit tempus. Proin lorem eros, pellentesque sed, semper in, pulvinar nec, nulla.</p>
    				<p>Sed commodo libero posuere sapien. Proin porttitor. Praesent varius lectus eu dui. Nam eu metus sit amet dolor consectetur sagittis. Morbi fermentum consectetur felis. Ut ut nibh. Donec vitae nunc eu massa consectetur molestie. Duis risus urna, ornare et, placerat id, bibendum sed, urna. Duis imperdiet convallis dolor. Fusce pulvinar leo quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pretium pellentesque mauris. Duis sapien lorem, facilisis at, fringilla nec, blandit at, mauris. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet sapien ac nibh. Pellentesque enim dui, porta nec, viverra sed, aliquet in, turpis.</p>
    			</div>
    		</div>
    		<div id="footer"></div>
    	</div>
    </div>
    </body>
    </html>

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello zwaldowski,
    You already have your right and left columns containing#wrapper and #footer, you're more than halfway there.

    The problem comes from telling the columns to be 100% height.
    height:100%; equals the full height of the browser window... but no more.
    Try this instead, I'm posting the entire thing because you had a few errors in yours -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Shadow + sticky test</title>
    <style type="text/css">
    html {
    	height: 100%;
    }
    body {
    	/*margin: 0 auto; what is being centered here? body is full width*/
    	height: 100%;
    	text-align: center;
    	font: 12px Verdana,Arial,Helvetica,sans-serif;
    	background: #8f9191;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #shadow-left {
    	padding: 0 0 0 20px;
    	background: #00f url(bg_left.gif) repeat-y top left;
    }
    #shadow-right {
    	padding: 0 19px 0 0;
    	background: #f00 url(bg_right.gif) repeat-y top right;
    }
    #wrapper {
    	width: 100%;
    	min-height: 100%;
    	margin: 0 auto;
    	text-align: left;
    	background: #ccc;
    }
    * html #wrapper {
    	height: 100%
    }
    #header {
    	width: 100%;
    	height: 89px;
    	background-color: #666666;
    }
    #content {
    	margin: 0;
    	padding: 5px 0 32px 0;
    }
    #footer {
    	height: 18px;
    	clear: both;
    	margin: -28px auto 0 auto;
    	background:url(cellpic3.gif);
    	padding: 7px 5px 0 5px;
    	color:#fff;
    	text-align:left;
    	border-bottom: 2px solid #0066cc;
    	border-top: 1px solid #666666;
    }
    /*  Just demo formatting */
    p {
    margin: 10px 5px;
    }
    
    </style>
    </head>
    <body>
        <div id="shadow-left">
            <div id="shadow-right">
                    <div id="wrapper">
                        <div id="header"></div>
                            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                            <!--end content--></div>
                    <!--end wrapper--></div>
            	<div id="footer"></div>
            <!--end shadow-right--></div>
        <!--end shadow-left--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, that's great. Thank you very much. The only problem is that I'm (sort of) back to step 1... content shorter than the viewport abruptly ends, hence me trying to extend the minimum height to the viewport. But I think I'll find a visual workaround for that (colorful border at the bottom of body? Something like that). I'm mostly fine, as long as it's tableless. Thanks again!

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Oops, didn't check it with no content.
    That's the thing about sticky footer, you get one element 100% and that's it. msuffern already showed you the faux method, that's what you really need.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, so I get to choose between fluidity and the cool shadows running all the way? Fluidity it is. Thanks!

    EDIT: By the way, I looked at your code again. I'm not crazy. The "margin: 0 auto" was for the theme I'm developing this layout for; one of my favorite features was to let the user assign a width to it (percentage or pixel). Just wanted to make sure it works; I varied the width a couple of times.
    Last edited by zwaldowski; 02-15-2009 at 04:14 AM.


  •  

    Posting Permissions

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