For example let's take a look for main page of Twitter bootstrap http://twitter.github.com/bootstrap/index.html
If I resize browser window to 400px I will see strange space on the right (look at the picture).
Another sample is StackOverflow. On browser resize header line with gray background don't resize to all screen (see below).
Why body don't resize to 100% of the browser window? I have a similar problem on my site
The issue happens when you make the browser window smaller than the minimum width of the content and horizontally scroll. Elements that are set to 100% width are 100% of the width, until you scroll horizontally, where they appear to be cut off.
The solution is to set a min-width on those elements so they are at least as wide as the content.
Here's an example:
HTML
<div id="header1">Broken header</div>
<div id="header2">Fixed header</div>
<div id="content">
content goes here.
</div>
CSS
#header1 {
background-color:#ccc;
border: 2px solid #00F;
}
#header2 {
background-color:#ddd;
min-width: 600px;
border: 2px solid #0F0;
}
#content {
width: 600px;
border: 2px solid #F00;
}
Similar questions:
