I want to layout a web page with a basic 3 section layout. There is a fixed, static top navigation bar on top. Just below it are two sections that will take up the full width and remaining height of the page. There is a fixed sidebar (non-collapsible) and to the right of it is the main pane that will show content (read dashboard).
Currently, I'm just hard-coding percent widths for the sidebar and main pane. Applying a min/max width to the sidebar breaks the layout. I can deal with it being a fixed width if need be.
How can I get the main pane section to take up the remaining width not used by the side bar if I assign the sidebar min/max/fixed width?
html {
height: 100%;
}
body {
padding: 0px;
height: 100%;
}
div {
text-align: center;
color: white;
}
.top-nav {
background-color: green;
height: 65px;
margin: 0px;
padding: 0px;
}
.content {
height: 100%;
width: 100%;
}
.side-bar {
background-color: blue;
width: 10%;
height: 100%;
float: left;
}
.main-pane {
background-color: red;
height: 100%;
width: 90%;
float: right;
}<div class="top-nav">
Fixed Top Navigation
</div>
<div class="content">
<div class="side-bar">
Fixed Side Bar
</div>
<div class="main-pane">
Main Pane
</div>
</div>Here is the above code in a pen.
Edit: I am open to other solutions that tackle this problem a completely different way if there are more preferred solutions e.g. flexbox.
