Smaller Resolution, Content Tries To Fit

If you will notice when you visit... http://www.thebattleforarcadia.com/construction/index.html when you shrink the size of the screen the top bar content ov开发者_如何学JAVAerflows it's parent div and runs over the rest of the website.

What I want to do is, if in-case the resolution of the receiving end is too small, I want to force them to have to use the scrollbar at the bottom so they can see everything. Just so the website is displayed properly.

Any coding ideas?

Thank you, Aaron

Add...

min-width: 1260px;

at the #news-container css rule.

Your website will display fine in 1280x** resolutions but there will be a vertical scrollbar in anything less than that (in width).

Perhaps you could make the min-width 960px and make the text expand in two lines (pushing the top graphic a bit) ? Just a suggestion

EDIT: here's an example

#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}

The above example will make the header "Expand" when the resolution is shrinked without forcing screenwidth < 1280px users to use the vertical scrollbar

Give the body element or any other element that is setting the width you want a min-width to match that. This should make sure that whenever the page is being viewed on a smaller resolution have a horizontal scroll-bar

See here for Commonly used pixel sizes for webpages and their pros/cons.