I've searched high and low for a solution to this issue but have come up empty-handed every time. It's possible I just didn't search hard enough, but everything I've attempted so far has failed to work. This problem has been plaguing me endlessly, and unfortunately, I haven't been able to find a fix.
The crux of my dilemma arises when attempting to make a div or another element span 100% of the page's width. The content container on the page is set at 960px. When viewing in full-screen mode, there are no issues. However, resizing the browser window smaller than the content width results in a dreaded horizontal scroll bar appearing and the 100% elements failing to maintain their width, leading to a cutoff effect.
Take a look at this example page:
Could anyone provide guidance on how to resolve this issue? The element causing trouble in this instance is the red header banner positioned at the top of the website.
HTML (including some PHP snippets for Wordpress):
<body>
<div class="header">
<div class="clearfix" id="header">
<h1><?php bloginfo('name'); ?></h1>
<h3>A Spooky Site</h3>
</div>
</div>
CSS:
body {
margin: 0px;
}
.header {
height: 100px;
width: 100%;
background: #8f2525;
color: #fff;
}
.clearfix {
width: 960px;
height: 100px;
margin: 0 auto;
}
.clearfix h1 {
margin: 0px;
padding: 15px 0px 0px 10px;
color: #fff;
}
.clearfix h3 {
margin: 0px;
padding: 0px 10px;
}
This issue also manifests when zooming in too closely, extending the content beyond the borders of the browser window or viewport.