построение меню в HTML с содержанием справа

JsFiddle: Здесь

Поэтому я столкнулся с двумя проблемами, и я не могу найти решения. один: мне нужно, чтобы высота div div была высотой, чтобы быть высотой меню (я бы предпочел не использовать правило min-height) два: когда содержимое div больше, чем в меню, мне нужно, чтобы высота меню была размером содержимого div.

HTML:

<div class="container">
    <div class="menu">
        <ul>
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
        </ul>
    </div> 
    <div class="content">content</div>
</div>
<div class="container">
    <div class="menu">
        <ul>
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
        </ul>
    </div> 
    <div class="content">content2</div>
</div>

CSS:

.container{
    padding: 5px 0;
    clear: both;
}
.menu{
   float:left;
    background-color: green;
}
    .menu ul{
        list-style-type: none;
        padding: 0;
        margin:0;
    }
.content{
    background-color: yellow;
    padding-left: 50px;
}

РЕДАКТИРОВАТЬ:

После того, как я столкнулся с jsFiddle, я придумал это, у кого-нибудь здесь есть проблема? По сути, он использует таблицу отображения и строку таблицы отображения...

HTML:

<div class="table">
    <div class="row">
        <div class="cell first">
            asdfasdf
        </div>
                <div class="cell second">
            Content 1 
        </div>
    </div>
</div>

<div class="table">
    <div class="row">
        <div class="cell first">
            asdfasdf
        </div>
                <div class="cell second">
            Cotent 2
        </div>
    </div>
</div>

CSS:

.table{
    display table;
    padding-top: 20px;
}

.row{
    display: table-row;
}

.first{
    background-color:green;
}

.second{
        background-color:yellow;
    width: 100%;
}
.cell{
    display:table-cell;
}