#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    40
    Rep Power
    2

    Add identical header and footer using CSS


    Hey there friends.

    I am looking to add an identical repeat image to both the very top and bottom of the page.

    I added the image to the body {} tag and also the html {} tag.

    The problem is the body is set to 1000px width - so either the footer or header is limited to 1000 px width

    How do I make them both stretch the entire page??

    Thanks in advance
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    867
    Rep Power
    275
    Its not good practice to set a width on your HTML or BODY tags.

    If you want to limit the width of your site, create a "wrapping" DIV and set the width on it..and place the rest of your content inside it.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    40
    Rep Power
    2

    Re:


    That doesn't work as I am trying to create a header and a footer for my website.

    How do I put a DIV inside of a DIV ... or can use something else like DIV and put it inside a DIV?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    867
    Rep Power
    275
    what you would do is get rid of the width in your BODY, then, create a DIV for header that has 100% width and no left/right margin.
    then, you can create a wrapper DIV that will be the 1000px limit [if you want] that you want for your content.
    then, create a DIV that has 100% width and no left/right margin for your footer.


    You can setup a class to use on your header /footer that will contain the needed 100% width and zero left/right margin.


    As for how to put a DIV inside a DIV, you simply do this:

    <DIV id="outer">
    <DIV id="inner">
    </DIV><!-- close inner div -->
    </DIV><!-- close outer div -->

IMN logo majestic logo threadwatch logo seochat tools logo