[Solved] How do I turn background of div into extending full width of page ?

[iizag]

Hi, So I am trying to create a page with multiple blocks, each block has its own content and different background color. An example is the following jobs page from this website : http://www.envato.com/careers . This is my demo page that I am trying to make a background block like that on : http://iamdentistry.com/timeline/.

This is the code that deals with the background div from my demo page:

.historysection {
    background: none repeat scroll 0 0 #66c8c9;
    color: #fff;
    overflow: hidden;
    padding: 2em;
    position: relative;
}

So in my demo page, there is white margins blocking the blue background from extending. I want the blue background to extend 110% left and 110% right, while keeping the overflow hidden , and keeping the content in the same position it is in now, so I can recreate that block backgrounds of content from the 1st link I showed.

How can I do this ? Thank you for any help

[Gary Pickles]

Hi Ian,

If you add this to the class=”historysection”

width: 300%;
margin-left: -100%;
padding-left: 100%;
padding-right: 100%;

[Paulie_D]

I think you are looking for something like ‘full width browser bars’.

If you search on CSS-Tricks you’ll find it.

[Paulie_D]

Perhaps an image of what this is supposed to look like…because I’m not getting it from your description.

[Gary Pickles]

Hi Ian, add a style to you div ID=”main” off

overflow: hidden;

That should sort it.

[Paulie_D]

But the demo page…as it now stands…looks nothing like the example envato page.

I’m confused….but if the current look is what you were after…OK.

Frankly, this is all pretty easy if you do the sections as layers like this simplified example

http://codepen.io/Paulie-D/pen/oGKtA

[Gary Pickles]

Hi Ian,

Add

margin-bottom: 0; to class entry-content

[Author]

Posts