-1

I've tried this seven ways from sunday and I keep coming up short.

Bands of color or what have you that extend to the limits of the visible page seem to be a very common request in internet forums / blogs, however for each of the two main scenarios I'm running into equally frustrating issues that render either solution untenable. In my frustration I've turned here.

HTML

<body>

<div class="container"></div>

<div class="content-container">

    <div class="content">

        Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good.

    </div>

</div>

<div class="container"></div>

Scenario 1 You set a container div at width: 100% and then a child div at a fixed width and margin: 0 auto; this effectively extends that div to the ends of the visibel screen at all times.

html, body {
width: 100%;
}

.container {
height: 20px;
background-color: #377ab7;
margin: 0 auto;   
}

.content-container {
height: 100px;
margin: 0 auto;   
}

.content {
width: 300px;   
}

Scenario 1 issue When the screen is resized so that the child div's fixed width is too big for the window a scroll bar appears. This is absolutely fine and desired, however when you use the scroll bar the extended bands of color only extend as far as 100% of the visible window.

Fiddle 1 (you need to resize the browser window to surpase the size of the fixed width content div and then use the scroll bar, you'll see the blue bands do not extend past 100% of the window size.) https://jsfiddle.net/b1dht69u/2/

Scenario 2 You set the overflow-x: hidden on the body and then run a very high negative margin, with a corresponding positive padding. 

body {
overflow-x: hidden;
}

.container {
height: 20px;
background-color: #377ab7;
margin: 0 -9999px;
padding: 0 9999px;  
}

.content-container {
height: 100px;
margin: 0 -9999px;
padding: 0 9999px;
}

.content {
width: 300px;   
}

This is absolutely great until again you try to resize the screen.

Scenario 2 issue When you resize past the size of a child div's fixed width no scroll bar appears.

Fiddle 2 https://jsfiddle.net/mnodvLvg/1/

What I am looking for is the best of both worlds. I am hoping to have a bar of color that extends to the ends of the visible page at all times, yet when a browser is resized past an inner divs fixed width a scroll bar appears.

ashcanschool
  • 319
  • 3
  • 18
  • 1
    Note, IDs **must** be unique. – j08691 Jul 21 '15 at 14:56
  • You mean like this - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen – Paulie_D Jul 21 '15 at 14:56
  • I'm not sure what your actual problem is but you can fix the scrollbar in your first fiddle by adding `margin: 0;` to the `html, body { }` selector. – TylerH Jul 21 '15 at 14:58
  • IDs have no been changed with no effect, but my code is more correct, so that's a bonus. Adding margin: 0; to the html, body in the first scenario does not achieve the desire result either. The desired result was that when the browser is resized the elements that were extended to the edges are reduced with the screen, but when the scroll bar is moved to view the content those elements do not extend to the edge. – ashcanschool Jul 21 '15 at 15:11
  • @ashcanschool What elements are not extending to the full width of the page upon resize? – TylerH Jul 21 '15 at 15:25
  • @Pauline_D I just spent several minutes learning about pseudo elements and nope that is not it. the scroll bar is remvoed from teh equation and the content shrinks as the browser window is resized, this is nto what I want to happen. – ashcanschool Jul 21 '15 at 15:29
  • @TylerH the elements that aren't resizing are what I originally deemed id="container" they have since been rightly corrected to class="container" – ashcanschool Jul 21 '15 at 15:30
  • @ashcanschool You want something like this? https://jsfiddle.net/TylerH/b1dht69u/4/ – TylerH Jul 21 '15 at 15:35
  • 1
    @TylerH nope, I did solve it thought with the use of the first scenario and adding min-width to the body element. – ashcanschool Jul 21 '15 at 15:38

3 Answers3

2

This is a curious problem, and one that I never gave much thought since I mainly work with responsive layouts.

However, there is a nice article by Nicholas Cerminara about dealing with fixed-width layout issues.

The key to this is setting a min-width on body{} and/or html{} in your CSS.

Interestingly, Stack Overflow uses this technique to prevent their top navigation bar from breaking when you resize the window. Just open your web browser DOM explorer on this website and disable the following style rules: body{min-width:1030px;} and html{min-width:1000px;} You will see the top nav bar break its layout and have the same issue you are experiencing.

CreMedian
  • 763
  • 5
  • 15
1

this scenario 2 with 9999px stuff is actually very dirty, forget it.

If you inspect the div, you'll see that the problem doesn't come from the div.container itself but from the body.

I would solve this with: 

html, body {
  position: absolute;
  min-width: 100%;
  width: auto;
}

As a reminder, don't forget that the ID must be unique. Better use class in this case.

An other idea could be to forget those .container DIVs and actually make borders for .content-container, but I don't know what you exactly would like to do.

#content-container {
  height: 100px;
  margin: 0 auto;
  border-top: 20px solid #377ab7;
  border-bottom: 20px solid #377ab7; 
}

Good Luck' !

Alexis B.
  • 1,105
  • 8
  • 13
0

If you have a fixed width for the content div, you may as well set a min-width of the same value or larger on the body tag. This will guarantee it can't be smaller than your content.

html, body {
  width: 100%;
  min-width: 300px;
  margin: 0;
}
bearfriend
  • 10,322
  • 3
  • 22
  • 28
  • This would just add a scrollbar for the whole body page... it's the right idea but the opposite of what you need to do. Use max-width on #content instead. – TylerH Jul 21 '15 at 15:36
  • That makes no sense. There's going to be a scrollbar either way. This just says, make sure the `body` fills out the whole thing. Adding `max-width` to `#content` would just squish everything and completely negate the fixed `width` it has. Also, the accepted answer is essentially saying the same thing. – bearfriend Jul 21 '15 at 19:29
  • You want the whole page to be scrollable left/right by like 4%? That's terrible behavior for the web. (PS - I posted my first comment above before the OP accepted an answer). I assumed the OP didn't want this behavior, and that they wanted the extra margin removed (based on the whole "the bars don't fit the page width" bit), but apparently the OP *wants* that terrible behavior. – TylerH Jul 21 '15 at 19:33
  • Respectfully, your assessment and opinion that it is "terrible" is easily debatable. In fact, it is normal. Shrink this stackoverflow window below 1000 pixels. You get a scrollbar. Do the same on github, or facebook. Same result. Is it possible to make things more responsive and avoid scrollbars? Of course. Also, the OP never said "the bars don't fit the page". They did, however, say, "... a scroll bar appears. This is absolutely fine and desired." – bearfriend Jul 21 '15 at 19:43
  • The fact that popular sites like Stack Overflow have horizontal scroll bars at uncommonly small resolutions is not evidence to the contrary. Stack Overflow suffers from a number of UX problems, including ridiculous amounts of whitespace, for example. Good websites are responsive in nature, and should never show a horizontal scroll bar. Even on mobile sites where swiping from side to side to advance content might be by design, you wouldn't have a scrollbar shown. A horizontal scrollbar is a sign post that says "I didn't keep this width in mind while making this site." – TylerH Jul 21 '15 at 19:47