align footer bottm? - Graphic Design Forum and Web Design Forum

philjohns · #1 (**permalink**) 29-01-2008, 06:25 PM

Ok, So Ive created my page will all ain divs - header, content, footer

All I want now is for my footer to be position at the bottom of the page UNLESS the content of the "content div" is too much.

What bit of css do I need to add?

the css code for my footer at the moment is:

Code:

#footer-container {
	background-image: url(images/footerfade.gif);
	height: 104px;
	margin: auto;
}

tommylogic · #2 (**permalink**) 29-01-2008, 06:33 PM

your Content div should expand to fit the content, leaving your Footer at the bottom.

philjohns · #3 (**permalink**) 29-01-2008, 06:36 PM

Thanks for the quick reply, but if my content div does not include enough content to expand then the footer will float half way up the page....

Basically I wish for my footer to be automatically at the bottom of the screen unless pushed further down by the content.

Toon · #4 (**permalink**) 29-01-2008, 06:42 PM

There's a nice piece on minimum height here...

A List Apart: Articles: Exploring Footers

philjohns · #5 (**permalink**) 29-01-2008, 07:31 PM

Thanks Toon - Ive just followed that bt it stil doesnt seem to work so Ive gone back to how it was before.

THis is what Ive got so far but as you can see I want the footer aligned to the bottom of the screen unless the main content pushes it down otherwise.

LOOK HERE

Toon · #6 (**permalink**) 29-01-2008, 07:39 PM

That's it, when you know how to do the basic layouts you can now design around that same code, with styled headers, footers, copy text etc. It gives you much more freedom and also the eyes read down rather than being boxed to one area.

You should fill it with 'lorum ipsum' text add a few H1, H2 headers and play with various styles.

philjohns · #7 (**permalink**) 29-01-2008, 07:41 PM

Thanks Toon, I'll do that in a bit, first I would like to get my footer sorted out though....

tommylogic · #8 (**permalink**) 29-01-2008, 09:50 PM

Try this...

HTML

HTML 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" xml:lang="en" lang="en">

<head>
    <title>Phil Johns Imaging - Plymouth Website and Graphic Design</title>
    
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Language" content="en-uk"/>
    <meta name="MSSmartTagsPreventParsing" content="true"/>
    <meta name="keywords" content="website design, graphic design, web design, website, graphic, design, websites, graphics, low cost website, low cost graphic design, affordable website, affordable graphic design, Plymouth website, Plymouth graphic design, Devon website, Devon graphic design, low cost, simple, user-friendly, minimal, Plymouth, Devon, web page, Devon web design, HTML, XHTML, CSS, hand coded, cascading style sheets, valid, logo, flyer, poster, banner, stationary, business cards, identity"/>
    <meta name="description" content="phil johns imaging - high quality graphic and website design at competive prices"/>
    <meta name="author" content="Phil Johns"/>
    <meta name="copyright" content="philjohnsimaging.co.uk - Phil Johns &copy; 2007"/>
    
    <!-- style sheets start -->
    <style type="text/css" media="all">@import "css/twocolumn.css";</style>
    <!-- style sheets end -->
    
    <!-- rollover javscript start -->
        <script language="JavaScript" type="text/JavaScript">
        <!--
        function MM_swapImgRestore() { //v3.0
          var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
        }

        function MM_preloadImages() { //v3.0
          var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
        }

        function MM_findObj(n, d) { //v4.01
          var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
            d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
          if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
          for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
          if(!x && d.getElementById) x=d.getElementById(n); return x;
        }

        function MM_swapImage() { //v3.0
          var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
           if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
        }
        //-->
        </script>
    <!-- rollover javscript end -->

    <link href="twocolumn.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('images/nav/home_dark.gif')('images/nav/about_dark.gif')('images/nav/portfolio_dark.gif')('images/nav/contact_dark.gif')">

<!-- page container start -->
    <div id="page-container"> 

    <!-- header start -->
        <div id="header">
            <img src="images/headerlogo.gif" alt="Phil Johns Imaging" />
        </div>
    <!-- header end-->

    <!-- main-nav start -->
         
          
          <div id="main-nav" align= "right" >
              <a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav/home_dark.gif',1)"><img src="images/nav/home.gif" alt="Home" name="home" border="0"  id="home"/></a> 
              <a href="about.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/nav/about_dark.gif',1)"><img src="images/nav/about.gif" alt="About" name="about" border="0"  id="about"/></a>
            <a href="portfolio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/nav/portfolio_dark.gif',1)"><img src="images/nav/portfolio.gif" alt="portfolio" name="portfolio" border="0"  id="portfolio"/></a>
            <a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/nav/contact_dark.gif',1)"><img src="images/nav/contact.gif" alt="contact" name="contact" border="0"  id="contact"/></a>
        </div>
    <!-- main-nav end -->

    <!-- content start -->
        <div id="content-container">
            <!-- left coloumn start-->
            <div id="left-column">
                  <p>Welcome to Phil Johns Imaging... </p>
                  <p>Everything that you see on this website has been designed and created 
        by myself and I have taken all of the photos too.</p>
                  <p>I create and design anything from a small logo to a large poster, a complete 
        website or flash banners. To pursue a high standard in this work I use 
        a variety of the best software available for these jobs including Flash, 
        Photoshop and Dreamweaver.</p>
                  <p>In my portfolio I have a range of design work but if you want to see 
        other examples please get in touch and I will be happy 
        to send you some samples. Also, in my portfolio you will see a variety 
        of photographs, all taken by me; these are up for sale but on request 
        only.</p>
                  <p>Please have a look around and get in touch if you have any queries.</p>
            </div>
            <!-- left coloumn end -->
            <!-- right column start -->
            <div id="right-column" align="center">
                <img src="images/previews/specialtoys.gif" alt="Phil Johns Imaging" />
                <img src="images/previews/shadowingtrees.gif" alt="Phil Johns Imaging" />
                <img src="images/previews/reactiongigs.gif" alt="Phil Johns Imaging" />
            </div>
            <!-- right column end -->
            <!-- footer start -->
        <div id="footer" align="right">
            | Phil Johns Imaging | Valid <a href="http://validator.w3.org/check?uri=referer" ><strong>XHTML 1.0</strong></a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" ><strong>CSS 2.1</strong></a> |
        </div>
    <!-- footer end -->    
            
    <!-- content end -->

    
        
    </div>
</body>

</html>

CSS

HTML Code:

#page-container {
    width: auto;
    height: 550px;
    margin: auto;
    background: url(images/background.gif);
    background-repeat: no-repeat;
    font-family: sans-serif;
}

html, body {
    margin: 0px;
    padding: 0px;
}

#header {
    width: 830px;
    height: 65px;
    margin: auto
}

#main-nav {
    width: 830px;
    height: 25px;
    margin: auto;
    padding-top: 3px;
}

#content-container {
    width: 830px;
    margin: auto;
}

#left-column {
    float: left;
    width: 500px;
    height: 380px;
    margin: auto;
    font-size: 80%
}

#right-column {
    margin-left: 500px;
    width: 327px;
    height: 380px;
}

#footer {
    width: 830px;
    height: 30px;
    margin: auto;
    font-size: 70%
}

a:link {
color: #666666;
text-decoration: none;
}

a:visited {
color: #333333;
text-decoration: none;
}

philjohns · #9 (**permalink**) 29-01-2008, 09:51 PM

Thanks Tommy, but Ive just sorted it with the help of Toon! THANKYOU!

Mack · #10 (**permalink**) 29-01-2008, 11:06 PM

or bottom: 0; it.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Licences to add in footer	macca11	General Web Design Forum	0	20-04-2008 10:24 PM
IE7, dynamic content and misplaced footer	the_bee	Graphic Design and Web Design Help	0	22-12-2007 03:52 PM
How to get my footer to stretch	...Gav	CSS Forum	6	16-12-2007 11:56 PM
35 website footer designs, trends and styles	Graphic Design Links	Graphic Design Links	0	25-10-2007 07:50 PM
CSS Footer	dave@wickmanstudios	CSS Forum	8	10-08-2007 03:27 PM