Question

I’m using 12 column 960 grid system to design my layout. Here is my HTML code

<div class="topStrip"></div>
    <div class='container_12 content'>
        <div class="topStrip"></div>
        <div class="menuStrip">
            <div class="grid_3 menu"></div>
        </div><!-- end menuStrip -->
        <div class="mainContent">
            <div class="grid_4  dash_1"></div>
        </div><!-- end mainContent -->
        <div class="footer"></div>
    </div><!-- end content -->

You can check the CSS in jsFiddle links provided below.

The problem is the field inside .mainContent Div i.e., .dash_1 is going out of the .content div – jsFiddle.

However, if i remove the .grid_4 and increase .dash_1 from div inside .mainContent it is expanding accordingly – jsFiddle.

This might be a simple problem with CSS however I’m breaking my head finding it out. Thanks in advance.

Answer 1

Your grid_4 have float on it. you have to clear his parent (mainContent). Write like this:

.mainContent {
    overflow: hidden;
    position: relative;
    margin-top: 50px;
}

Read this for more http://www.quirksmode.org/css/clearing.html

Check this http://jsfiddle.net/PmKPb/8/