Full width div background color inside a fluid grid layout

Question

I am trying to create a div that is inside a fluid grid layout that has a background color that stretches across the entire width of the page but still holds content, like the dark blue and light blue sections of https://unroll.me/

Answer 1

First of all you will need to create a div for the blue background. Then you will need to create a div inside of the blue background div to hold your content.

<div id="blueBackground">

    <div id="contentDiv">

      <!-- your content here -->

    </div>

</div>

Next you will style the div's with CSS

#blueBackground {
    background:#hexcolor;
    width:100%;
    padding: 40px 15px; /* first number sets vertical padding - second sets horizontal */
}

#contentDiv {
   width: 100%;
}

Answer 2

#mydiv {
    width: 100%;
    background: blue;
}