Set div to 100% of content - html

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!

Answer 2

You can add height: 100% to the menu-div (twocol). That should do it.
In any way: maybe it would be a bit better to change the structure of the divs a bit:
<div class="menu">
-- Side Menu Content Here --
</div>
<div class="content">
<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>
I my experience it makes the layouting easier, when you have seperate divs containing the menu, content, header and footer.
When you use float, I often set a backgroudcolor to my divs during development, so I can see how much space they take (especially the height). Because as soon as the div ends, all left floated divs will go as far left as they can.

Answer 3

I just did it here on jsfiddle ( http://jsfiddle.net/cXXGj/ ). I think you need this way. I just wrapped content inside another div with class content_container. Have a look at the fiddle: http://jsfiddle.net/cXXGj/