CODEWITHSUNDEEP
widthcss
bhphoto
bhphoto

Reputation:

100% width header doesn't fill browser

When the browser window is small enough to force a horizontal scrollbar and you scroll right the background color of the header ends before the edge of the browser. I am using a css class.

.s_header {
    margin: 0;
    width: 100%;
    display: block;
    border-bottom: 1px solid #000;
    background-color:#b8dbec;
    height:133px;
}

The contents of <div class="s_header"> are not as wide as the 4 column table below it where the content totals abot 840px with image widths+padding and a 140px fixed width column. So when the browser window is less than 840px there is a horizontal scrollbar which is ok except that the background of the header is cut off when you scroll.

The parent elements of <div class="s_header"> are body and html for which 100% width means the window width. I've tried including overflow:visible in .s_header class without success.

The body width is also set to 100% margin 0

Is there a simple way that I can get the background to extend on the right when a scrollbar appears?

The problem page is at here

Any suggestions will be greatly appreciated.

Upvotes: 8

Views: 18120

Answers (5)

Emmanuel DUDRET
Emmanuel DUDRET

Reputation: 9

My [very simple] [and probably ugly] solution :

  1. set your body tag min-width property to 100%;
  2. define a minwidth class defining a 100% width property and a min-width property based on the following calculation:
    • having set your font-size to 100%, verify its translation into pixels in a browser;
    • divide the nowadays 17" monitors standard resolution 1440px width with this pixels 1em font-size result;
    • set the min-width property expressed in em to this result;
    • e.g. for font-family: 'Gill Sans MT', sans-serif; 100% size results in a 16px font;
      1440/16 = 90
      your CSS must then look like this:
      html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

Finally 3. apply the .minwidth class to all body elder children having to be 100% body size wide.

Rezise your browser window and/or change the resolution, you should have get rid of this annoying problem for all screen resolutions up to 1440*900

Hope I could help

Upvotes: 0

expert coder
expert coder

Reputation:

easier way is to create an inner div and set it to the same width as the page goes just before the scrollbar appears example

<div class="s_header"> <div class="inner">

</div> </div>

.inner{
  width:990px;
  background:#f00;
  margin:0 auto;
}

Upvotes: -1

Andrew Mason
Andrew Mason

Reputation: 118

It looks like the issue is down to the three images in the body table. When you reduces the browser width it causes the three image so bunch up, being in individual table cells they can not wrap resulting in a fixed width.

You could try to fudge the solution by using a repeating background image for the header, but I would re-write the table structure with a floating approach.

Upvotes: 0

Robert Greiner
Robert Greiner

Reputation: 29762

set the margins of your body tag

The in-line way

<body style="margin: 0px 0px 0px 0px;">

In your style.css (or whatever)

body {
  margin: 0px 0px 0px 0px;
}

Upvotes: 12

Joel Martinez
Joel Martinez

Reputation: 47809

I wholeheartedly suggest that you use firefox and install firebug: http://getfirebug.com/

It has this cool feature that lets you inspect a dom element, and it will tell you all styles, and what stylesheet they originate from. So if the body is inheriting some errant padding (or something), you will be able to see visually what's going on :-)

Upvotes: 1

Related Questions