Footer Placement

HTML & CSS
1

Been reading site for some time and this will be my 1st Post.

I have been teaching myself html and css as my friend needed a site built. All is going good, however I am having issues with positioning. Each page is made up of the following class’s. A main container that wraps all my content (.container), Inside this I have a header (.header) then in the body section I have some text (.content) and some more text that floats to the right (.fltrt) and a footer (.footer). My .container is 960px wide by 600px high. I want to have my footer positioned at the bottom of .content, I am not sure which positioning method to use static, relative, Absolute, or fixed. Within the footer I have some text to the left and some to the right using .fltrt.
Below is my .container and .footer. If anyone can help it would be much appreciated

.container
{
width: 960px;
height: 500px;
background: black;
margin-left:auto;
margin-right:auto
}

.footer
.footer {
padding: 0;
background: black;
position:
}

2

Hi, Welcome to Sitepoint :slight_smile:

You want to avoid using height especially when holding fluid text content. Elements should be allowed to grow with text resize or with content and adding height to elements is the biggest mistake that beginners make.

Webpages are fluid and can be as long as they need be so don’t start of by trying to restrict them. If you must use a height then its always better to use ems so that text resize isn’t an issue.

In a 2 column layout its easier to float the two columns and then set clear:both on the footer so that it sits below. A webpage should be as fluid a s possible and adding or removing content should not create any issues for you.

If you have set a height on your content and then you want to add half a dozen paragraphs you would have to change the height every time. Just let the content dictate the height and things will work smoothly because one element flows to the next.

Here is a quick revision with some bright colours so you can see where everything is.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, form {
    margin:0;
    padding:0
}
ul {
    list-style:none
}
/* CSS Document */
#container {
    width: 960px;
    margin:auto;
    background:red;
}
#header {
    width:960px;
    background:blue;
}
#menu {
    width:960px;
    background:green;
}
#content {
    float:left;
    width:800px;
    background:orange;
}
#sidebar {
    width: 150px;
    float:right;
    background:teal;
}
#footer {
    width:960px;
    clear:both;
    background:yellow;
}
</style>
</head>
<body>
<div id="container">
    <h1 id="head">Header</h1>
    <ul id="menu">
        <li>menu</li>
    </ul>
    <div id="content">
        <h2>Main content</h2>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    <div id="sidebar">
        <h3>Side content</h3>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>
</body>
</html>

If you want equal columns then look at faux column techniques using a background image.

3

I thought absolute might be the way to go but the Places it at the bottom of the page not the container,

position:absolute;
bottom:0px;

4

Well i have worked out how to get what I want by defineing each Id, rather than setting postion.
I still need to learn how to do this at some stage, if any one knows a good postionong tutorial.
For thos people starting out like my self heres what I did

Thanks
What i have done is
a style sheet with following
/* CSS Document */
#container {
width: 960px;
height:700px;
margin:auto;
}
#head {
height:100px;
}

#menu {
height: 50px;
}

Content {
height: 500px;
}

#rightnav {
height:550px;
width: 150px;
float:right;
}

#footer {
height: 50px;
}