1

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.

user3634781
  • 79
  • 1
  • 2
  • 8
  • please provide some code in the question. Posting links to hosted pages is not a good approach to ask a quesiton – Kristijan Iliev Nov 13 '16 at 09:13
  • as Chris said - and also in your page - limit the H1's that you are using - semantically you should only have one h1 followed by h2's etc - not skipping staright to a h3 .... in HTML5 elements such as sections it is semantically correct to have a single H1 per element but it isn't really like that in this linked page. And if you are using the HTML5 doctype - you can use the HTML5 elements such as
    instead of
    – gavgrif Nov 13 '16 at 09:16
  • I have edited in the source code. This is actually my first time using HTML5 (mainly used it to test media earlier) and I didn't know about those. Thanks for the tips! – user3634781 Nov 13 '16 at 09:22
  • Okay... first, lose the .clearfix-classes. They're really never ever needed, and if they are, you're doing something wrong. Second, stop using `px` for size - use something dynamic, like `em` or `%`, even on the container. Third, if you have set a specified `width` in `px`, of course that will stay that size if the screen gets smaller. Hence why we have dynamic sizing, @media-queries, and other nice things that will make your life better, if you learn to use them. – junkfoodjunkie Nov 13 '16 at 09:28
  • Don't set the width to 100%. A block element should automatically fill the available width. – GolezTrol Nov 13 '16 at 09:36
  • I've always used px measurements because I thought they were standard and accurate. Didn't know I shouldn't use them. I'm not brand new to coding, but I am self-taught based off of what I wanted to do and don't know a lot about widely used standards/design measurements. The .clearfix class name was not really needed. It wasn't clearing anything - I was using it to center the content that would be in the header like the site title. Displaying as a block did not help either. – user3634781 Nov 13 '16 at 09:36
  • Why are you setting fixed with to clearfix div? – No one Nov 13 '16 at 09:39
  • @user3634781 When you use a fixed width, as in `clearfix`, it will be cut of when the browsers viewport gets smaller. To make that _responsive_ you instead give it a `max-width`. This will do the exact same thing on big screen but will adjust on smaller. Resize this fiddle and you'll see the yellow border present at all screen sizes without getting cut when scroll appears: https://jsfiddle.net/nssbx8e6/ (I also gave the clearfix a `min-height` to let it grow on narrow screens) – Asons Nov 13 '16 at 10:05

5 Answers5

2

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.

Community
  • 1
  • 1
Ouroborus
  • 16,237
  • 4
  • 39
  • 62
  • I think using those .clearfix things incorrectly messed with what I was asking for. What I am trying to do is have a centered box that will contain header content, such as the website title. This way I can align it to the left of the 960px wide box that is centered on top of the background 100% width banner. This already works, but the problem with it is that the background banner will not fill up the entire width of the page when the window is scaled down or the resolution is too low to contain all of the content. – user3634781 Nov 13 '16 at 09:43
  • It might help better explain what I am looking for if you visit the example site and snap your browser to the right of your screen and scroll over to the right. I don't care if the content has a scroll bar as I am not looking to work with responsiveness just yet, but rather make the background banner of the header span over completely instead of cutting off when scrolling over. – user3634781 Nov 13 '16 at 09:44
  • @user3634781 Yeah, set `max-width:100%;` on `clearfix` (what is now `headerContent`) in addition to what you already have. You can kind of see what's going on by checking the width of `body` in the debugger. When the view is narrow, the `body` still tries to fill the view but, due to elements with `width:960px` pushing past the body, the browser tries to give it a place to draw and you get the effect you're seeing. Setting `max-width:100%` would prevent those elements from ever extending past the `body` width. Another option is `overflow:hidden` on `headerBanner` but that is less than optimal. – Ouroborus Nov 13 '16 at 09:55
  • Oh, okay. I see what you mean now. But the problem that I had come up with this is that since I am not ready to create a separate styling sheet to make optimal for mobile resolutions, wouldn't this make some content appear stupidly? For example, if I had 3 buttons as you can see in the [mockup I made earlier in HTML5](http://www.yenrac.net/spook) (ignore the memes and silly content I was helping a friend with something) they would stack strangely or overflow on mobile. – user3634781 Nov 13 '16 at 10:01
  • So I wanted to make the site kind of a static size so that a mobile device would still be able to scroll around on the page and would just zoom in and out if needed to until I could create a separate mobile option. Wouldn't setting max-width: 100% make that not happen? – user3634781 Nov 13 '16 at 10:02
  • 1
    @user3634781 Perhaps `min-width:960px` on `headerBanner` or `body` then. – Ouroborus Nov 13 '16 at 10:06
  • This worked best! Thank you! For some reason I thought they would conflict and just cause the same issue I was having before, but this is great! – user3634781 Nov 13 '16 at 10:11
0

I think this really fixes your problem 

max-width: 960px;
Liang
  • 507
  • 2
  • 9
  • This wouldn't fix my problem, as it would just make the full width bar 960px wide. There is a background div acting as a container with the background color which is holding a 960px wide container for header content. – user3634781 Nov 13 '16 at 09:24
0

Here is your solution

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

It will not create scroll.

Azeem Haider
  • 1,443
  • 4
  • 23
  • 41
  • Yes it will look very fine for all screen. – Azeem Haider Nov 13 '16 at 09:30
  • ^ Pretty much that. The .clearfix is a div made as a container for header content that is to be centered. The content of the page is 960px wide, while I want the background of the header to stretch across the screen. – user3634781 Nov 13 '16 at 09:31
  • Aha. Okay. So it's a useless container used to position something that should be positioned elsewise. Good to know. `.clearfix` has been defunct for the last 5-6 years, at least. Update the code, folks. – junkfoodjunkie Nov 13 '16 at 10:23
0

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

No one
  • 1,130
  • 1
  • 11
  • 21
  • I am looking to have all of the content centered in the middle of the screen though, leaving blank space on the left and right. I want to have the title of the page and the subtext aligned to the left of the container it's in which will be centered. – user3634781 Nov 13 '16 at 09:47
  • If you want center element( I think you are talking about h1 and h3 text) then simply put text-align:center to their parent element. their text will be centered. – No one Nov 13 '16 at 10:01
  • I don't want them in the center of the page, though. I want them aligned to the left of a box that is 960px wide that is centered, so that they are at the left of the center as seen in the example page. – user3634781 Nov 13 '16 at 10:03
  • @BrijeshVishwakarma `text-align` is inherited by default. What you propose would extend to also centering the text in the `h1` and `h3` elements as well. – Ouroborus Nov 13 '16 at 10:03
  • ohhh.. I got that. You want headerContent to be center in headerBanner element correct. So why don't you give width in percentage to headerContent like 80% so that it will leave space around in left and right and it will be in center also. Also there child h1 and h3 will be left align to headerBanner. – No one Nov 13 '16 at 10:08
0

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!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
  • The scroll-bar isn't so much of the problem though. The .clearfix box is inside of the .header class, which is what is being used to make the red background banner across the top of the page. That's the thing that won't adjust. I don't mind the scroll-bar at all. I am not good in the practice of responsive designing yet, so I was trying to make static page that you can scroll left and right on but not have the background of a div cutoff when resized. – user3634781 Nov 13 '16 at 09:50
  • @user3634781 Oh! I got it now, I've updated my answer by using `dispaly: table;` in `.header` but this doesn't seems to be a good practice. Hope this helps! – Saurav Rastogi Nov 13 '16 at 09:58