It has been a while since I last coded a website, so my skills are a bit rusty. My goal is to create a fixed-width sidebar with full height and a fluid content area. (Check out the visual mockup here: )
I came across faux columns, which seem to be working well for most of the layout. However, I'm struggling to make the sidebar full height using this technique.
Below is the CSS and HTML code I'm currently using:
html,body {
height: 100%;
}
#page-container {
min-height: 100%;
margin: 0;
position: relative;
}
* html #page-container {
height: 100%;
}
#inner-container:after {
content: " ";
display: block;
clear: both;
}
#left-col {
float: left;
width: 250px;
background-color: #F3F3F3;
}
#right-col {
position: relative;
margin-left: 250px;
}
HTML:
<div id="page-container">
<div id="inner-container">
<div id="left-col">
<ul>
<li>Lorem Ipsum</li>
<li>Dolar Sit Amet</li>
<li>Consectetur</li>
<li>Adipiscing</li>
<li>Elit Integer</li>
</ul>
</div>
<div id="right-col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
</div>
Any suggestions on how I can achieve a full-height sidebar? Perhaps there's a better column technique to use?