www.webdeveloper.com
Results 1 to 4 of 4

Thread: Force Header and Footer to take up all available width

Hybrid View

  1. #1
    Join Date
    Jun 2010
    Posts
    2

    Force Header and Footer to take up all available width

    I'm building a site, and I want to have a header and footer that go across the whole page, with a main section that is centered and 900px wide. You can check out the current progress at DesignaCast.com.

    When the user makes their browser smaller than 900px they get scroll bars, and if they scroll to the right, there is whitespace where the header and footer should be...does anyone know how I might begin to fix this problem?

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    I found that is was the element with class="clearfix" that is making the extra white space on the right of your page.

    if you change the style attribute for .clearfix to this:
    Code:
    .clearfix (
    display: block;
    width: 902px;
    }
    ...it cuts the whitespace down to 2px, or so. Any smaller than that and the site seems to fall apart though.

  3. #3
    Join Date
    Jun 2010
    Posts
    2
    I tried...that didn't seem to do anything, my header still has whitespace when i scroll over.

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    In your stylesheet (the grid section) there is this line:
    Code:
    .container {width:950px;margin:0 auto;}
    Which was .clearfix parent element, and the one with the width set. Try changing the line to this...
    Code:
    .container {width:902px; margin:0 auto;}
    ...(In Firefox at least) it removes all but 1-2px of the white space.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles