www.webdeveloper.com
+ Reply to Thread
Results 1 to 6 of 6
  1. 10-27-2012 05:05 PM #1
    flanagan
    flanagan is offline Registered User
    Join Date
    Oct 2012
    Posts
    3

    Lightbulb footer at bottom

    hi all, my first post here

    hope somebody can help me. Im desperately trying to get the footer stick to the bottom of the page. i have tried all the examples i have found on the internet, but none seem to work as i want.
    here is a pic with the structure of my site:

    http://www.imagebanana.com/view/449svdfm/divsStruct.jpg

    i need both the main-container and the main to fill the space between the header and the footer. but no matter what i try, they always fit to the contents

    any ideas?
    Reply With Quote Reply With Quote
  2. 10-27-2012 05:17 PM #2
    auntnini
    auntnini is offline Registered User
    Join Date
    Sep 2006
    Location
    new york
    Posts
    218
    Need to see your actual HTML and CSS code. An online link to page would be best.
    Reply With Quote Reply With Quote
  3. 10-28-2012 09:13 AM #3
    flanagan
    flanagan is offline Registered User
    Join Date
    Oct 2012
    Posts
    3
    thanks for reply,
    i have it only in local, so cant give an url.
    will try to put the code here

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>THE TITLE</title>
<style type="text/css">
html,body{margin:0; padding:0; height:100%;}
#wrapper{min-height:100%; position:relative;background: #1ae6e0;}
#header-container{background:darkgreen; height:100px;}
#header { background: green; margin:0 auto; width:800px; height:100%; }
#main-container{padding-bottom:80px;background: #c23dc2; min-height:100%;}
#main { background: pink; margin:0 auto; width:800px; height:100%; }
#footer-container{position:absolute; bottom:0; width:100%; height:80px;/* Height of the footer */background: darkblue;}
#footer { background: blue; margin:0 auto; width:800px; height:100%; }
p, h1{padding:10px; margin:0; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
#vc-main{height:100%;}
</style>
<![endif]-->
</head>

<body>
<div id="wrapper">
	<!-- BEGIN: HEADER-->
    <div id="header-container">
		<div id="header">
		<h1>this is the header content</h1>
		</div>
  	</div>
    <!-- END: header -->
        
    <!-- BEGIN: body -->
    <div id="main-container">
		<div id="main">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
				minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
				ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
				voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
				sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
				 mollit anim id est laborum.
			</p>
		</div>
	</div>
    <!-- END: body -->
        
    <!-- BEGIN: FOOTER -->
    <div id="footer-container">
	    <div id="footer">
		    <p>This is the Footer</p>
	    </div>
    </div>
    <!-- END: FOOTER -->
</div>
</body></html>
    Reply With Quote Reply With Quote
  4. 10-28-2012 06:49 PM #4
    theyoker
    theyoker is offline Registered User
    Join Date
    Oct 2012
    Posts
    69
    So you only want three main sections of the webpage? As in your picture only has three sections.
    Or do you want the multi-coloured background?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>THE TITLE</title>
<style type="text/css">
html,body{margin:0; padding:0; height:100%;}
#wrapper{min-height:100%; position:relative;background: #1ae6e0;}
#header-container{background:darkgreen; height:100px;}
#header { background: green; margin:0 auto; width:800px; height:100%; }
#main-container{padding-bottom:80px;background: #c23dc2; min-height:100%;}
#main { background: pink; margin:0 auto; width:800px; height:100%; }
#footer-container{position:absolute; bottom:0; width:100%; height:80px;/* Height of the footer */background: darkblue;}
#footer { background: blue; margin:0 auto; width:800px; height:100%; }
p, h1{padding:10px; margin:0; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
#vc-main{height:100%;}
</style>
<![endif]-->
</head>

<body>
<div id="wrapper">
	<!-- BEGIN: HEADER-->
	   <div id="main-container">
    <div id="header-container">
		<div id="header">
		<h1>this is the header content</h1>
		</div>
  	</div>
    <!-- END: header -->
        
    <!-- BEGIN: body -->
 
		<div id="main">
			<p>
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			THEINTERNETTHEINTERNERTHEINTERNETTHEINTERNERTHEINTERNETTHEINTERNER
			</p>
		</div>
	</div>
    <!-- END: body -->
        
    <!-- BEGIN: FOOTER -->
    <div id="footer-container">
	    <div id="footer">
		    <p>This is the Footer</p>
	    </div>
    </div>
    <!-- END: FOOTER -->
</div>
</body></html>
    Reply With Quote Reply With Quote
  5. 10-29-2012 09:22 AM #5
    flanagan
    flanagan is offline Registered User
    Join Date
    Oct 2012
    Posts
    3
    hi,
    yes, i need 3 sections (the 3 containers) that expands horizontaly 100%, and then inside each of them, another div that is at the center.
    basically as it is on the code, and it works in part, because the footer always stays at the bottom, the problem is: when there is few content, the footer remains at bottom (thats ok) but i need the "main-container" and "main" divs to always fill the space between header and footer. right now, if there is few content, the main-container and main divs fits to the contents, and so the wrapper (cyan color) shows up.

    i mean, what i need is: the header always at top, the footer always at bottom, and the main-container (and also the main that is inside it) to fill all the space between them. so, the wrapper color (cyan) should NEVER be seen.
    Reply With Quote Reply With Quote
  6. 10-29-2012 11:07 AM #6
    theyoker
    theyoker is offline Registered User
    Join Date
    Oct 2012
    Posts
    69
    Hello,

    Code:
    min-height:1000px;
    Put this in the main container CSS/ whatever the body is. And it will always be 1000px (horizontal length)change to what you want.

    Don't forget you can also do percentages.

    Code:
     
min-height:70%;
    Last edited by theyoker; 10-29-2012 at 11:23 AM.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

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

Forum Rules

 HTML5 Development Center



Recent Articles