Use-Cases of this Tutorial
- You are looking to create a HTML page that will hold a sidebar on the left side, and a section beside it that would hold the content of the menus.
- Sidebar would be "fluid" - its height would remain the same as the height of the main content.
A webpage with a left sidebar to hold menu options, and a section to hold the main content is one simple design that looks good and gets the work done.
Admin sections, creating a documentation page are a few examples where this design is popularly used.
Demo
You can download codes for the demo at the end of this tutorial.
HTML Involved
Creating such a page involves a simple HTML structure - a container to hold the sidebar, a container to hold the main content, and an outer container to hold the 2 inner containers.
<div id="outer-container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
CSS Involved
The main trick behind such a design is using the display CSS property appropriately. Both the sidebar and content are given the CSS display : table-cell, while the main container is given the CSS display : table
#outer-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
display: table-cell;
width: 15%;
vertical-align: top;
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
}
A very important thing is to make width and height of the table level element to occupy 100% of the available width and height. Setting the height of html and body element as 100% is a must, as ultimately height would be inherited from the top.
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}