CODEWITHSUNDEEP
htmlcss
user3634781
user3634781

Reputation: 79

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.

Upvotes: 1

Views: 4381

Answers (5)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Its giving you horizontal scrollbar because you are specifying the width (i.e. fixed width - no matter what is the width of the screen is).

So use

.clearfix {
  max-width: 960px;
}

Instead of

.clearfix {
  width: 960px;
}

If you want the .header not to cut off, then make (but this doesn't seems to be a good practice)

.header {
  display: table;
}

Hope this helps!

Upvotes: 0

No one
No one

Reputation: 1140

Just remove fixed width css from headerContent div and you are done.

Upvotes: 0

Ouroborus
Ouroborus

Reputation: 16865

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.

Upvotes: 2

Azeem Haider
Azeem Haider

Reputation: 1513

Here is your solution

    .clearfix {
  width: 100%;
  height: 100px;
  margin: 0 auto;
}

It will not create scroll.

Upvotes: 0

Liang
Liang

Reputation: 515

I think this really fixes your problem 

max-width: 960px;

Upvotes: 0

Related Questions