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;
    }

    #wrapper{
    width: 900px;
    height: 900px;
    margin: 0px 200px 0px 200px;
    background: white;
    }
    #footer{
    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!

    Thanks

    Joshua

    # 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:



    body {
    Background: #dedede;
    font-family: arial;
    font-size:100%;
    margin: 0;
    padding: 0;
    }

    Wrapper:



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

    Footer:

    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:



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

    Now, use this HTML:



    <html>
    <body>

    <div class="wrapper">
    ...Content...
    </div>

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

    </body>
    </html>

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

    http://codepen.io/anon/pen/LEltJ

    # 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

    Kr

    Joshua

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".