100 % Divs and Small Windows, My 100 percent DIVs don't fill the whole browser screen Options

[nichie12]

Hello Dear Fellow Coders:

This is the problem I'm running into.

I have a nice 100-percent DIV on the top of my page, which works fine in most instances.

However, if you load the page with a window where the right-hand limit overlaps the content, the "100 percent" DIV does NOT stretch all the way across the window. When the window is resized, the problem fixes itself. However, if a page is loaded at less than 100 percent, and the person scrolls to the right, the "missing" part of the DIV shows up. Here's what it looks like:



Here's the CSS I'm using for the top bar:

#headerArea
{
float: center;
width: 100%; !important;
background: url("images/bg/darkgreen.png");
background-repeat: repeat-x;
height: 50px;
text-align: center;
}

Any help would be GREATLY appreciated.

[pandy]

URL to page?

[nichie12]

URL to page?

Here's the URL:

www.faisonnc.org

[Darin McGrew]

Well, since div#shadowWrapper is being stretched by its content, you could put div#headerArea , div#whiteDiv , and div#darkGreenDiv inside div#shadowWrapper

[nichie12]

Hey Darin,

Thanks for the help. Unfortunately, putting those DIVs inside the #shadowWrapper did not do the trick. I also tried building a "container" div that was also 100 percent. The problem seems to lie in the fact that "100 percent" means 100 percent of the WINDOW, not to entire area of content. Which seems like a bad policy to me. But it's the same on every browser I've tried, on Mac, Linux and God help me, Windows.

[pandy]

Make it 1071px which is the total width of the fixed width layout.

CODE

#shadowWrapper
{
    margin-left: 61px;
    width: 1010px;
    float: left;
    margin-top: 36px;
    background-color: white;
    background: url("images/bg/bigShadow3.png");
}

[nichie12]

Very interesting. I did as as Pandy suggested, and made the "100 percent" divs into fixed-width 1071 pixel divs. However, that presented a problem - the "decoration" a.k.a a white line, and another green one below it, now did not extend across the entire page. I immediately realized the problem, and am about to set on (fairly easy) work to put those lines into the actual background image.
What surprised me, however, is that I was unable to mix a collection of "fluid" element and a collection of "fixed" elements. Shouldn't a declaration of "100 percent" mean it stretches across the entire border, regardless of whether there's fixed content beneath it? Am I just writing something wrong, here? Can't you define a fluid 100 percent top border and then add DIVs of a fixed width beneath it? Am I missing something here?
And thank you all so much for your kindly help! I suppose Pandy's suggestion is the most viable solution at this point in time.

[pandy]

No, 100% doesn't mean the width of the viewport plus anything that sticks out from it. If you want fixed, stay fixed. Of course you can mix fixed and fluid elements within a page, but if you stack boxes one below the other the way you have done and size some in pixels and some in percent, they will be the same width only at a certain size browser window.

It's like cutting 3 pieces of string exactly 9 meters long, walk into an arbitrary room and cut a fourth piece that's 100 percent of the length of the room you happen to be in when you do it. All 4 pieces will be the same length only if the room is 9 meters long. Some rooms are 9 meters, but most are not.

[pandy]

To add to that, if you have a fixed with container box, 100% boxes contained in it will of course be the size of the parent box.

[nichie12]

Thanks to Pandy, this problem has been solved, adding the "min-width" attribute to my css. Instead of recreating the background image file, I assigned minimum widths to "decorative" small-width DIVs, at the same width as the primary "top" DIV.

That means that the border covers the whole top when the window has been resized in a small way, but also extends as the browser window expands. Thanks, Pandy!

[nichie12]

Okay, I typed my answer too late to make sense.

Basically, I totally removed all 100 percent widths from my CSS.

Instead, used the MIN-WIDTH: 1070px for all of the areas that I wanted to look like "100 percent" width.

This allowed me to cover the entire top of the layout with a "backgrounded "strip because of the MIN-WIDTH statement, the top bar stretches as far as the user decides to resize the window.

All of this thanks to Pandy's help.

In the future, I'll try a different approach with "fluid" layouts -- this one turned out to be a fixed width with some modifications to make it appear that there were a few 100 percent elements, even though there were none.

Again, thank you Pandy for your expertise.