Creating a Page with Sidebar and Main Content Area using HTML & CSS

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.

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%;
}