CSS - menu DIV will not stretch

Question

I have this layout created in css: http://snag.gy/sJy7w.jpg

The menu div on the left will not stretch. The green area should be filled with the menu but it won't.

JSfiddle: jsfiddle.net/DMkXF

The 'menu div' on the left should stretch vertically with the 'content div'

What do you mean filled with the menu? Do you mean you want the green area to wider? If so what area would you like it to be exactly? — wuno, Jun 13 '14 at 15:51
Can you provide a [JSFiddle](http://jsfiddle.net/)? An image and some CSS is useless and we can't tell which element has which class. — Andy, Jun 13 '14 at 15:52
The 'menu div' on the left should stretch vertically with the 'content div'. — Babak Zahedi, Jun 13 '14 at 15:53
http://jsfiddle.net/DMkXF/2/ if you add `html, body { height:100% }` , `.menu { height:100%; }` and `.container { height:100% }` it should work. — Nick R, Jun 13 '14 at 16:10
yes true, it will work, but the problem is the container height becomes too much which will put a scrollbar on the screen. I want the menu to stretch with the content div, which will never go further than the bottom of the page. I'm sorry I'm a bit vague at explaining .. — Babak Zahedi, Jun 13 '14 at 16:11
And it works, but if I put for example 10 tables on one page, the last tables won't show because the content div is not stretching.. @NickR — Babak Zahedi, Jun 13 '14 at 16:52

score 0 · Answer 1 · answered Jun 13 '14 at 16:37

check this out...i was trying this and this shows as you want, that your content is aligned with your menu as a i understand with your explanation..

<div class="container">
<table>
    <div class="header">header</div>

    <tr>
        <td>
            <div class="menu">menu</div>            
        </td>
        <td>
            <div class="content">content goes here</div>         
        </td>
    </tr>
</table>    
</div>

define a teble for me is a good way to develop and define areas...i hope helped you

CSS - menu DIV will not stretch

1 Answers1