SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer Placement

    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. #2
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    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.

    Code:
    <!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.


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
  •