Static Sidebar and Fluid content with header and footer - html

Question

Hi I have been having a problem with coding my layout I want to have my sidebar stay the same with regardless of screen size, but I also need my content area to be fluid. The header stays at the top which is what I want the problem is the footer I need it to stay always at the bottom and the full width of the content area. If anyone can help it would be muchly appreciated.
Here is my code.
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
float: left;
background-color: red;
}
#right {
float: left;
width: 80%;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 80%;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>

Answer 1

Use inline-block over float:left to avoid problems with clearings, but when using inline-block better use vh over % to fill the viewport.
And to have a fixed sidebar, just give it a fixed width and use calc to calculate the remaining space.
you can do something like this:
Snippet
html,
body {
height: 100vh;
margin: 0;
}
#content {
width: 100vw;
font-size: 0; /* fix inline-block gap */
}
#content > div {
font-size: 16px; /* revert font-size 0 */
}
#left {
width: 150px;
height: 100vh;
display: inline-block;
vertical-align: top;
background-color: red;
}
#right {
display: inline-block;
width: calc(100vw - 150px);
height: 100vh;
background: green
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: calc(100vw - 150px);
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>

Answer 2

Here's what you should do :
First, replace the float:left; with display: table-cell; for your #left and #right selectors.
Then, use display: table; for your #content selector.
Then, remove the width: 80%; of your #right and #right footer selectors
Add right : 0; to your #right footer selector
Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.
The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().
A demo :
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: table;
}
#left {
width: 100px;
height: 100%;
display: table-cell;
background-color: red;
}
#right {
display: table-cell;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
right : 0;
left : 100px;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
See also this Fiddle.