user3634781 user3634781 - 26 days ago 10
CSS Question

HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?

I've looked for a solution to this and have never found one. Maybe I just didn't look hard enough, but everything I've tried doesn't work. This problem has bothered me forever and I've never been able to fix it.

My problem occurs when I am trying to make a div or other element take up 100% of the width of the page. The container of the content on the page is 960px. When I am in a fullscreen browser there is no problem, however when I adjust the browser window size to be smaller than the width of the content it will create a horizontal scroll bad and the 100% elements will not retain their 100% width, creating a cutoff.

Here is the example page: http://www.yenrac.net/

Does anyone know how to fix this? The element in this case is the red header banner at the top of the website.

HTML (actually a little PHP 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 effect also happens when zooming in far enough to make the content exceed the border of your browser window/viewport.

Answer

First, don't use the clearfix class like that. It has a specific common use and you'll only confuse yourself and others later.

Your clearfix width is 960px. Its parent, header, is set to 100% width. header will size with the page. clearfix will always be 960px regardless of page or parent width as this is how you set it.

Depending on what you want, there are several solutions:

  1. Set width:100% on clearfix, rather than width:960px
  2. Set max-width:100% on clearfix
  3. Remove width:960px from clearfix

Based on your other comments, you probably want option 2.