6

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:

Example layout

I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?

One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.

I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.

Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.

Kasaku
  • 2,192
  • 16
  • 26

1 Answers1

6

I'm not sure if this is the 'best' solution, but it is a solution nonetheless.

  • Create a pseudo element for each coloured box (:before)
  • Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
  • Set top and bottom values to 0 so it's always the correct height
  • Set background colour to match box
  • Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
  • For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
  • Finally, you'll need a page container set to overflow: hidden.

HTML

<div id="page">
    <div class="container">
        ...
    </div>
</div>

CSS

#page {
    overflow: hidden;
}    

.box-left:before,
.box-right:before {
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

.box-left:before {
    left: -999em;
    background: orange;
}

.box-right:before {
    right: -999em;
    background: lightblue;
}

DEMO

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • Certainly works - doesn't allow for also having content in the gutter, but as stated in the question, this wasn't a necessity. – Kasaku May 06 '14 at 11:15
  • great answer... you just saved me a colossal headache! – JRulle Oct 03 '14 at 18:36
  • @DutGRIFF all browsers that support double colon also support single colon, so I personally just tend to use single so IE8 understands as well as all the others. – davidpauljunior May 18 '15 at 13:56
  • CSS 3 use ::before and ::after. I think it was only IE 8 who used a single colon so unless trying to support IE 8 I''d use the double. (oops) I didn't meant to delete this comment.... so I brought it back. – DutGRIFF May 18 '15 at 13:58
  • @davidpauljunior The only reason they support it is because IE8 is still used. Some day IE8 will be gone. If you want to support IE8 use both. Once IE8 is gone there will be no reason for browsers to support single colon... other than to support developers who are still using legacy code. I am sure autoprefixers will take care of adding the single quote syntax for us. If you aren't using autoprefixer you should check it out. It will keep you css clean and only include all those tags until you don't need them anymore. – DutGRIFF May 18 '15 at 14:07
  • 1
    @DutGRIFF yeah something to consider if browsers are going to remove support for single colons. Autoprefixer is for prefixes only. https://github.com/postcss/autoprefixer/issues/365 – davidpauljunior May 18 '15 at 14:24