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

Published on November 1, 2017

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.


Click to see the demo page

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>

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

Download Codes


In this Tutorial