<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html {
margin: 0;
padding: 0;
border: 0;
}
body, div, span, applet, object, embed, iframe, pre, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, del, dfn, b, strong, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, table, tbody, dl, dt, dd, ol, ul, li, fieldset, form, button, label, legend, caption, hr, noscript {
margin: 0;
padding: 0;
border: 0;
outline: none;
list-style: none;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: top;
text-decoration: none;
position: relative;
}
body, html {
height: 100%;
border: none;
top: 0;
font: 12px/1.3 Helvetica, Arial, sans-serif;
color: #131318;
background: #E7E7E7;
text-align: left;
}
.full {
width: 100%;
float: left;
}
.top {
padding: 20px 0;
background: #FF0000;
}
.center {
width: 900px;
margin: 0 auto;
}
.shell {
width: 860px;
padding: 20px;
float: left;
background: #FFF;
}
</style>
</head>
<body>
<div class="full top">logo</div>
<div class="full">
<div class="center">
<div class="shell">
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
</div><!--/.shell-->
</div><!--/.center-->
</div><!--/.full-->
</body>
</html>
You can see in here (or by visiting here and shrinking your browser down until there is a horizontal scroll bar, then scrolling to the right) that the top red bar is always the size of the viewport, rather than filling up the entire width of the page. How can I fix this? How can I make a bar like this (my header with menu, etc.) truly fill the width of the page, regardless of view-port resizing (preferably without JavaScript)?
This has been asked many times. The consensus seems to be to set a min-width on the div.
Other discussions: