Css fluid layout with two columns

Question

I need to do a layout in this way:

----------------------
|   header           |
----------------------
|  N  |              |
|  A  |   CONTENT    |
|  V  |              |
|-----|              |
|     | ----BAR----  |
|EMPTY|              |
|     |              |
----------------------

I want the overall width to be 100% of the body, the navigation has width 15% but min-width 120px. The width of the bar (that is an element in the content div) has to be 100% of the content div.

In the html I have the limitation that the navigation div has to go before the content div.

EDIT: My code in the html is

<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>

The code i have in the css right now is:

#nav {
    float: left;
    width: 15%;
    min-width: 120px;
    }
#content{
    float: right;
}
#bar {
display: block;
background-color: #D2DEE4;
}

Could you help me please?

Answer 1

I like the flexbox method more, however keep in mind this doesn't work with IE9 and below.

Flex-basis (aka flex: {shrink} {grow} {flex-basis}) is required because flex doesn't work well with css widths.

*{
  margin: 0;
  padding: 0;
}

header{
  padding: 10px;
  width: 100%;
  background: #888;
}

.sidebar{
  padding: 10px;
  flex: 0 0 120px;
  background: #07f;
}

.content{
  padding: 10px;
  background: #ddd;
  width: 100%;
}

.container{
  display: flex;
  flex-direction: row;
}

<header>
  This is the header
</header>

<div class="container">
  <div class="sidebar">
     This is the sidebar
  </div>

  <div class="content">
    This is the content
    <br>
    test
  </div>
</div>