SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer in the bottom of page

    I having problems to add footer to the bottom of the page. I want to have the footer in the bottom of the page event if the content isnt filling out all the space...

    Im using typicall div-design. One div that have 2 sub-divs, menu and content. What I like to do is something like this.

    <div id="">
    <div id="menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>

    #menu and #content are supose to be side by side and footer in the bottom beneath the #menu and #content...

    Can any one give me a hand?

    Kind regards...
    RASH.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    see FAQ CSS
    http://www.sitepoint.com/forums/show...66&postcount=3

    or
    100% height


    this is a way
    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" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    	
    	div{text-align:left;/* to get text back to the left*/}
    	
    	#wrapper{width:760px;background:#d8d8d8;padding-top:100px;margin:-100px auto;}
    	* html #wrapper{height:100%;}/* IE */
    	head+body #wrapper{min-height:100%;}/* FF NS Moz OP */
    	
    	#menu,#content,#footer{width:100%;}
    	
    	#menu{height:100px;background:#ff8c00;}
    	#content{padding-bottom:100px;}
    	#footer{height:100px;width:760px;background:#ff8c00;margin:0 auto;}
    	
    	#wrapper p,#footer p{padding:5px;}
    	</style>
    
    </head>
    
    <body>
    <div id="wrapper">
    <div id="menu"><p>menu</p></div>
    <div id="content"><p>content<br /><br /><br /><br />end</p></div>
    </div>
    <div id="footer"><p>footer</p></div>
    
    </body>
    </html>
    Last edited by all4nerds; Dec 28, 2005 at 15:30.

  3. #3
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I mange to get the result, however I wish to have two wrapper divs... One that has 550px width, and the other 540px.. That way I can have shades (5px width on both side) and fill the content with an other pattern...

    Kind regards
    RASH.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That way I can have shades (5px width on both side) and fill the content with an other pattern...
    Just use one image for all 3 and use it on the one wrapper. use an image similar to this.

    http://www.pmob.co.uk/temp/images/1colcentrebg.gif

    taken from here:

    http://www.pmob.co.uk/temp/1colcentred.htm


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
  •