Backround color problem in firefox

Remove these four lines from #wrapper

/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD */
width: 98%;
position: absolute;
top:180px;

And remove the fixed height from .container.

To explain.

In standards compliant browsers (not IE) a specified height means exactly that height. You have told firefox to make .container 700px high. Any content that can't fit within that height will be displayed according to the overflow value. AND the element will not expand beyond 700px. Similarly any element it is nested within will only be pushed to expand by the 700px height. Hence the background stops at that point.

For #wrapper. You shouldn't need position:absolute. The element can remain in flow. Because its in flow, it no longer needs a width - it'll automatically take the width remaining once margins, borders and paddings have been taken into account.

Thanks so much!

But...now my menu bar is within the innerwrapper. I'd like it to be between the inner wrapper and the submenu (the horizontal bar)

Any ideas on that?

Ok, here is what I've done:

I added back in:

width:98%
position: absolute
top: 180px

Without these, wrapper and innerwrapper are too high on the page and don't allow a place for the menu bar.

If I don't have the width: 98%, then both the wrapper and innerwrapper are shifted to the left side of the page. I need them to be centered.

Is this ok the way I have it?

Instead of adding back the position:absolute and top:180px, use margin-top: 48px (or some appropriate value).

That sorta woked.

If my pages had any photos near the foot, they would extend down beyond the wrapper and innerwrapper.

Floats are out of flow. You need to clear them or use one of the wrapping techniques:
- float the parent
- overflow:hidden or overflow:auto on the parent
- position:absolute

Using position absolute is not a good habit to get into because they too are out of flow. Where possible, keep elements in flow as much as possible, your pages will be more robust.

Using position absolute is not a good habit to get into because they too are out of flow. Where possible, keep elements in flow as much as possible, your pages will be more robust.

Unfortuantely, you have me lost, now.

when you say the parent, do you mean my wrapper?

See enclosing float elements for a simple demo.

cheers,

gary

Ok...I think I might have it.

Would you mind taking a look at my css now, and see if it's ok?

I'm still having issues with this page though:

http://www.avonleatreasures.com/RTA/KingFamily.html

Note how the innerwrapper just stops at a certain point. I thought I fixed this issue by taking out the height property from the "container"

nope you haven't got it, you're clearing the wrong element, you are attempting to stop floated elements from doing what they are supposed to do which is drop through their containing element/parent, you have applied overflow:hidden to '#wrapper' it needs to be placed on #innerwrapper not #innerwrappers parent '#wrapper' that element will expand along with #innerwrapper or put another way it's height is controlled by #'innerwrapper.

The basic nomenclature used to describe element grouping /hierarchy, where elements are nested is one of a
'child'( innermost nested element)
belonging to or having a 'Parent' (it's containing element that it sits in , and that surrounds the child) both child and parent can also have 'Ancestors' (being one or more elements that are further up containing the parents and children, not necessarily immediately though ) and of course children can have 'Siblings' (elements that exist at the same level within a group) bellow any element can exist further nested elements these are referred to as 'Descendents' a general term to describe an element that exists as a nested one.

There are of course those elements that have yet to be conceived and these are known as 'Twinklings'

'Sibling' and 'Descendent' as well as 'child' are also methods of specifying/targeting elements from your stylesheet.

Hugo.

Wow, that seems like it can get so confusing.

No wonder I can't make my family tree, either!

Ok, so all I needed to do was move the overflow: hidden to the innerwrapper? That is done, and the example page above now look right. So I suppose my problem is solved.

Thanks so much everyone for your help.

I have one more question, related to what I've been trying to solve.

Is it possible to make the innerwrapper and wrapper always fill the screen to the foot of the screen?

Here is another example:

http://www.avonleatreasures.com/contact.html

Note that once the content ends, the wrapper and innerwrapper stop. Ii it's possible, I'd like it to continue a bit. Should I just add a bunch of <br />'s?

Now you're thinking like a print designer. A web page has no set height. It is as tall or as short as the content. The viewport (the browser window) is whatever size the user wants it to be. Why even fret yourself over it?

That said, and if you insist on doing paper things on an unknowable viewport, it could be done fairly easily were it not for IE. Since IE is pretty stupid about css, we have to fake it. Take a look at this footer demo. It locks the footer to the bottom of the viewport as long as the content doesn't push it down. The space between the content and the footer does not belong to either, but if you control the background correctly, it will appear to belong to the content.

Play with it for a while to get it figured out. If you then hit a snag, yell; we'll be here.

And one more thing, never, never, let me reiterate, never use <br>s to fill space.

cheers,

gary

Thanks Gary...I'll give it a try, if not only to learn a bit more about css.

It must be the printer in me coming out...yes, I worked in printing for over 10 years.

So what DO you use to fill space space?

Nothing. You might use margins to create space between elements, or padding to create space within an element.

This is the hard part for trained graphic designers and print people, the content controls the design, not the other way around. In print, design and content are closely intertwined. In a web page they are separate. In print you know the bounds of your document/brochure/label/flyer/whatever. In web design, you have no knowledge of the viewport nor can you control it.

To compare, you've just finished a nice 11×17 poster to advertise a famous author's talk at the library reading club. Now the PR rep says, "Oh, here's 500 words of bio and blurbs that just must be included." Well, that won't fit. You'll have to redesign. Can you even get 500 words on the 11×17 sheet along with the other stuff? At all?

On a web page it doesn't matter. A web page is as long (or short) as it needs to be. The converse is that it is a PITA to emulate a sheet of paper.

I hope you'll understand that the two media are as different as night and day. It's unfortunate that it looks like they have more in common than they really do. It's new paradigm time.

cheers,

gary