I want to make a simple HTML layout using CSS where I have a header, two columns where the column on the right is a fixed width (say 100px for now). The left column will at some point have generated content, it shouldn't run past the page bottom but it may it may in the future... anyway I want both of my columns to stretch to the footer... here is my HTML:

```
<!DOCTYPE html>
<html>
<head>
  <title>Coming soon...</title>
</head>
<body>
<div class="wrapper">
    <div class="header">
        Header
    </div>
    <div class="content">
         Content Here will be dynamic... sometimes 1 word, sometimes 1000 words! Either way, I want to reach the footer!

    </div>
    <div class="right-menu">
        Here will be a menu... I want this to be the same height as 
      the content DIV
    </div>
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

```

and here is my CSS:

```
.header {
    background-color: Coral ;
    width: 100%;
}

.content {
    background-color: BlanchedAlmond ;
    float:left;
    width:100%;
    margin-right: -100px;

}

.right-menu {
    background-color: BurlyWood ;
    float: right;
    width: 100px;
}

.footer {
    background-color: Coral;
    width: 100%;
    clear: both;
    position: absolute;
    bottom: 0;
}

```

I made a JSFiddle of this and I noticed that my content div also seems to run under my menu... how could I prevent this too: <https://jsfiddle.net/dwn82s81/>

Many thanks in advance. I realized that I haven't written any CSS for ages!