Get a free trial // Grow your CSS skills // Land your dream job

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

    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