Question

I am using the 1140px fluid grid (cssgrid.net) layout.

I am having some problem..

My layout looks like this:

Side Menu - Content
          - Content
          - Content
          - Content
          - etc. etc.

My problem is, that my layout does like this:

Side Menu - Content
Content
Content
Content
Content
etc. etc.

I want, so my “Side Menu” is full height, so it will push the content to “the right”.

My layout (Exist of 12 cols):

<div class="container">

  <div class="row">
    <div class="twocol">
    -- Side Menu Content Here --
    </div><!-- END 2col --> 

    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
    <div class="tencol last">
    content content content
    </div> 
  </div><!-- END .row -->  
</div><!-- END .container -->

The CSS is:

.container {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
/*max-width: 1140px; */
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.row .onecol {
width: 4.85%;
}

.row .twocol {
width: 13.45%;
}

.row .threecol {
width: 22.05%;
}

.row .fourcol {
width: 30.75%;
}

.row .fivecol {
width: 39.45%;
}

.row .sixcol {
width: 48%;
}

.row .sevencol {
width: 56.75%;
}

.row .eightcol {
width: 65.4%;
}

.row .ninecol {
width: 74.05%;
}

.row .tencol {
width: 82.7%;
}

.row .elevencol {
width: 91.35%;
}

.row .twelvecol {
width: 100%;
float: left;
}

.last {
margin-right: 0px;
}

I hope you can help me. Thank you.

Answer 1

Your layout looks this way:

body
+------------------------------------------------------------+
| two col content   ten col content                          |
| +--------------+ +---------------------------------------+ |
| |              | |                                       | |
| |              | |                                       | |
| +--------------+ +---------------------------------------+ |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
| +---------------------------------------+                  |
| |   ten col content                     |                  |
| |                                       |                  |
| +---------------------------------------+                  |
+------------------------------------------------------------+

Do not repeat that ten col content. Keep it as a wrapper and use smaller divs. Like this:

body
+------------------------------------------------------------+
| two col content   ten col content                          |
| +--------------+ +---------------------------------------+ |
| |              | | +-----------------------------------+ | |
| |              | | |                                   | | |
| +--------------+ | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  | +-----------------------------------+ | |
|                  | |                                   | | |
|                  | |                                   | | |
|                  | +-----------------------------------+ | |
|                  +---------------------------------------+ |
+------------------------------------------------------------+

In case if you want the HTML Code,

<div class="container">

    <div class="row">
        <div class="twocol">
        -- Side Menu Content Here --
        </div><!-- END 2col --> 

        <div class="tencol last">
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
            <div>
                content content content
            </div>
        </div> 
    </div><!-- END .row -->  
</div><!-- END .container -->

Hope it helps!