This question already has an answer here:
- Two column layout with left fluid and right fill the rest width 4 answers
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?