The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Footer size

  • # July 10, 2013 at 5:15 pm

    Hi Everyone,

    Again very simple.

    I would like to make my footer the size of the body instead of the size of the main Div, if i change the width of the footer to width of the body its increased it in only one direction, if i then create a margin and put the opposite side as a negative, it then effect the contents within the footer, please see below a section from my style sheet:

    body {

    Background: #DEDEDE;
    font-family: arial;
    font-size: 12px;
    margin: -20px 0px 0px 0px;
    padding: 0px;
    height: 1000px;
    width: 900px;

    width: 900px;
    height: 900px;
    margin: 0px 200px 0px 200px;
    background: white;
    clear: both;
    height: 200px;
    width: 900px;
    text-align: center;
    margin: 0px 0px 0px 0px;
    font-family: arial, helvetica;
    font-weight: bold ;
    font-size: 11px;
    background-color: black;


    Would really love some help!



    # July 10, 2013 at 5:32 pm

    Move your footer out of your wrapper.

    # July 10, 2013 at 6:29 pm

    You should not be setting height on your elements. That should be determined by content within plus top and bottom padding.
    No need to repeat font-family, that cascades from body. No need for footer margin 0 0 0 0.

    # July 10, 2013 at 6:49 pm

    This reply has been reported for inappropriate content.

    Step 1.

    Remove the height from the wrapper and body elements. Like jurotek said, the content delivered will determine the height. If you set a height property on body, you will end up with a scrollbar 900px high if your content goes over that (overflow).

    Step 2: The CSS

    Leave your body property free of formatting with margins unless it’s really necessary. The only thing you should be using whilst learning CSS is the following:


    body {
    Background: #dedede;
    font-family: arial;
    margin: 0;
    padding: 0;


    .wrapper {
    width: 900px;
    height: auto;
    margin: 0 auto;
    background: #fff;


    Try to refrain from using the physical wording when assigning colours. use #000 for black, #fff for white and so on (Hex), It’s just better practise :). Plus, your footer won’t be stuck at the bottom. Use this awesome trick if you need. Otherwise, this is what you need:

    clear: both;
    height: 200px;
    width: 100%;
    text-align: center;
    margin: 0;
    font-family: arial;
    font-weight: bold;
    font-size: 12px;
    background-color: #000;

    Now, use this HTML:


    <div class="wrapper">

    <footer> ...Content... </footer>


    Heres: a better example to show you how it works. I’ve changed the wrapper div slightly.

    # July 11, 2013 at 4:13 pm

    Thanks guy!

    Its very re-assuring to see some people are happy to help beginners just on the basis to be kind!

    Very grateful



Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed