0

I am working on a the html/css of the landing page of a website/application and I don't want to make too many changes. The templates are rendered using Jinja2 and the homepage extends from a page_template.html. There are many page templates that extend the page_template.html so I would like to fiddle as little as possible with it. The designer would like to have the background-color of a div (or two) on the homepage extend out over the entire width of the browser no matter the browser/screen resolution. The page template has a page-container id wrapping around the entire content like so. 

#page-container {
  background-position: 0 85px;
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
}

If I want to extend a div to go outside this width of 1200px I decided to try something like this: 

.overflow {
  background-color: #fff;
  margin-right: -200px;
  margin-left: -200px;
  padding-right: 200px;
  padding-left: 200px;
}

And do something like this: 

<div id="page-container">
  <div class="overflow">
   Content
  </div>
</div>

And it seems to work. And it works well enough for this webapp ( I think ). However it breaks the responsiveness of the page in that the divs which have this .overflow class do not resize when the browser is made smaller. Is their a better way to do this? And is their a way to do this without affecting the responsiveness?

nicholaschris
  • 1,401
  • 20
  • 27

1 Answers1

1

This can be done with the :before and :after pseudo-elements.

Assuming the markup you used in your question, this CSS should do the trick:

.overflow { position: relative; }

.overflow:before,
.overflow:after {
    display: block;
    content: " ";
    position: absolute;
    width: 9999px;
    top: 0;
    bottom: 0;
    background: #c0ffee;
}

.overflow:before { left: 100%; }
.overflow:after { right: 100%; }

You may also want to consider adding overflow-x: hidden to your body and html elements to prevent horisontal scroll bars:

body, html { overflow-x: hidden; }

Browser support for this is essentially IE8+ so you can expect it to work on mostly every browser.

Nils Kaspersson
  • 8,816
  • 3
  • 29
  • 30
  • Thanks!, This seems to work well. I do get two vertical scroll-bars. Do you know why that could be? – nicholaschris May 15 '13 at 09:11
  • 1
    Two vertical scroll bars? I have never seen this behaviour, however it seems like others experience similar problems, for instance: http://stackoverflow.com/questions/9132746/two-vertical-scrollbars-in-firefox-when-using-overflow-xhidden – Nils Kaspersson May 15 '13 at 11:02
  • Hmmm, yes I see. The suggested answers from from that question didn't work for me so I removed this line in the CSS: `html { overflow-y: scroll;}`. Do you think I will create potential problems by removing this line? – nicholaschris May 15 '13 at 11:51
  • 1
    I cannot say for sure but i never/extremely rarely use overflow-y: scroll on anything so it shouldn't cause you any problems removing it. – Nils Kaspersson May 15 '13 at 12:08