Div Cutting Off Part of My Page

I am having a weird problem with a page I am designing. I have simplified my page to find what is causing the problem.

If you condense your browser window and use the horizontal scroll bar, you will notice that the .line div (thiner line with a background of black) gets cut off. Can anyone explain to me why this happens and how to fix it? I would like the .line div to go on forever.

http://dl.dropbox.com/u/14080718/testing/line.html

I am a beginner designer and its probably something simple, but I cant figure it out and my page is kind of at a stand still until I do.

I honestly never understood this, but I believe it has something to do with margin: 0 auto;
I typically set containers with min-width: ; for the header, content, and footer.

I believe this fixes it:

.line { min-width: 50em; }


I believe it is because the nav with width of 50em is setting the 100% width of the parent, when we say min-width, we are allowing it to go past the set 100%, along with margin: 0 auto;
I remember reading about this a long time ago, and now that I can fix it, I don't remember why
Don't worry about it, it's something you learn how to fix in time

Hello again NateG,
try setting .line to min-width: 50em;
Note: IE6 and earlier versions does not support the min-width property.

Worked like a charm! Sammy12 you are awesome!

I would however, like to understand why it worked. Does anyone know why min-width would let the line go one forever?

I think this is why, and it may be wrong but I'm going to explain it in my own words:


the width of the parent is dependent on the width of its children.
your <nav> has a margin: 0 auto; width: 50em; which is restricing the width of the parent to 50em; therefore all its children (.line) have a set width of 50em
by setting .line to min-width: 50em; you are breaking that rule that it is set at 50em;


as I said before, I'm not a 100% sure, and I can't find the article I read a while ago. realize that even the google homepage has this problem