text overflows to left of window, is unreachable

and an NN4 background color problem

[danny]

My goal is a centred menu, in a 40em wide color stripe (itself centred on the page), followed by a single text column, 30ems wide and also centred (but left-aligned).

I have the following CSS

BODY {width: 40em; margin: 0 auto; background: #FFFFFF;} 
.menu {text-align: center; background-color: #FFCC99;} 
.main {margin-left: 5em; width: 30em;} 

This works in IE 6, IE 5.2 on the Mac, and Konqueror/Safari, and almost works in Netscape 4 and Gecko (Netscape 7/Mozilla).

The problem in Gecko is that if the window is resized so it's very narrow, some of the text is pushed to the left of the window, where it can't be reached even using the horizontal scroll-bar. I'm not sure if this is a serious problem, but I suspect it might be on devices such as mobile phones with small displays.

In Netscape 4, the background color is applied only to the immediate background of the menu text, rather than extending in a 40em stripe across the page.

Any advice on how to fix either of these problems would be appreciated.

[danny]

Aaarrrrgh. I've just discovered that in IE 5.0 the menu is page-centred but the body of the review text is not.

I thought at least my book reviews would be easy to CSS, but this is getting complicated -- or am I missing something really obvious? (As I was when I was trying to use max-width, which was the wrong approach entirely.)

[AWildman]

I have done what you're trying to do, but I am NOT supporting Netscape 4x and below.
I used a main div which had 100% height and width. In that div, I made a table that had two rows, three cells. (one cell for the top row, two for the second row) I set the div to be centered, which of course makes all the elements contained therein centered. I know, I don't like tables either, but sometimes they are a necessary evil.

As to the Netscape 4 issue, the background will only stretch as far as the text/images etc. contained within. I hate doing it (largely cause its extra coding) but you can add a spacer pic that will take up the rest of the space after text.

[DrDoc]

To make the background color extend in NN4, just add border:none

[danny]

{border: none;} gives me a rectangle... but stops the text being centered! I think I'll give up on NN4 looking nice and just make sure it's usable.

I'm more worried about the Gecko/Mozilla problem, though - the NN4 one is just aesthetics, but Gecko may be used on some mobile phones etc. with very small displays, and having text that is actually impossible to get to is kind of catastrophic.