Hi,

I recently finished this layout image:

http://50.87.144.149/~caio/clientes/cg%20consultoria%20layout%20v3.jpg

 

I want to code it, but I'm in front of a situation I dont know how to deal.

 

I always use a wrapper div to make the content of the site centralized.

 

I want to make the blue strips at the background to appear on 100% width, not being stuck

to the wrapper width.

 

At the same time, I would like the blue strips to follow the site position, because of this

it can't have a "position: absolute", which would be a simple solution.

 

Is there a solution for this kind of thing?

 

Thanks in advance for any help.

I would have send have an inner container which would mean adding extra elements

 

you could also try using minus margins and padding

<div id="cont">
    <header>
        <nav>
            your navigation items
        </nav>
        <h1>sute title</h1>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </header>
</div>

body{overflow-x:hidden;}/*stops bottom scroll bar showing*/
#cont{width:50%;margin:10px auto;} /*container to centre content*/
header{background:#9c9c9c;margin:0 -2999px;padding:0 2999px} /*uses minus margin and padding to extend background out of container*/

Edited July 2, 201313 yr by mteam

If I understand what you mean correctly I would tackle it like this, then just repeat the code for all the appropriate sections.

 

<section class="fullWidth">
     <div class="pageWidth">
          <!--content that needs to be inside the wrapper here -->        
     </div>	
</section>

.fullWidth	{
     background: #000000;
}

.pageWidth	{
     margin: 0 auto;
     width: 960px;
}

Edited July 4, 201313 yr by StephenOC