htmlcss960.gs

Grid 960 take up entire width with resize

I am having trouble getting my 960.gs to take up the entire width of the browser. I want the grid to be 100% on resize, that is if I scroll out the text will appear smaller and take up less lines but the grid will still take 100% of the width.

There is this question here When using grid 960, can I still have a 100% width header section? And the answer was to set the top part to 100%. I added the code but this has no effect, neither does setting the body's width to 100% and all divs, ect. What am I doing wrong? Here is the code:

<!doctype html>
<html>

    <head>
        <title>My Fragment</title>
        <meta charset="utf-8" />
        <!-- Symbols rendered -->
        <meta name="value" />
        <!-- Do not need to close -->
        <link rel="stylesheet" href="css/960_12_col.css">
        <style>
            body {
                background:green;
            }
            div {
                background: white;
            }
            .grid_4 {
                height: 100px;
            }
        </style>
    </head>

    <body>
        <div class="header" style="width:100%;"></div>
        <div class="mainWrapper container_12">
            <div class="grid_4" style="background:red">sdfds</div>
            <div class="grid_4" style="background:blue">sdfs</div>
            <div class="grid_4" style="background:yellow">sdfs</div>
            <div class="clear">sdfds</div>
        </div>
    </body>

</html>

But this gives me the following result:

enter image description here

I want to see no green space on left side of the red column and the right side of the yellow column but this is not the case. How do I get rid of the space either side?

(Please note I am new to css and Html and have been following the learn html in 30 days, and whatever else I find online.)

Solution

  • First of all - <div class="header" style="width:100%;"></div> is not wrapping your container.

    Second: add width: 100% to your mainWrapper class instead of .header, but that i know there is hardcoded widths in 960 grid system, so your columns with .grid_4 will be still width: 300px.

    Try with another Grid System with fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/