Css fluid layout with two columns [duplicate] - html

Question

This question already has answers here:
Two column layout with left fluid and right fill the rest width
(4 answers)
Closed 6 years ago.
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>

Answer 2

This method is static and doesn't allow for percentages (you'd have to use media queries for other screen sizes.)
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
box-sizing: border-box;
float:left;
background: #06f;
display:block;
width: 120px;
padding: 10px;
}
.content{
box-sizing: border-box;
padding: 10px;
display:block;
background:#ddd;
margin-left: 120px;
}
<header>This is the header</header>
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
<br>
test
<br>
test
</div>