How to Create a Fixed Sidebar Website Layout?
Tutorial explaining us how to create a professional looking well designed fixed sidebar in the left with fluid background at the back.
A website with professional look is always preferred by many bloggers and website owners. Especially, if you are a web designer, then your blog needs to be something unique and beautiful. Creating a website with fixed sidebars, can be something nice to have and admire.
Tutorial Level: Intermediate
There are design websites with fixed sidebar, the one I love the most is Web Designer Wall blog. Here is a snapshot of that website:
Demo of my creation at the below links:
This tutorial is quite simple. The logic behind this tutorial is not by laying two layouts side to side using “float” attributes as it is generally done for arranging layouts commonly in web designing. The logic behind this tutorial is by specifying a “width” for the sidebar and by making the position of the sidebar “fixed“.
Here is a simpler illustration of how the layout is arranged using HTML and CSS:
<!-- YOUR CSS LINKS & META TAGS -->
<!-- SIDEBAR CONTENTS HERE -->
<!-- MAIN CONTENT HERE -->
CSS for the Above layout:
border-right:1px solid #aaa;
margin: 0 40px 40px 280px;
As simple as that. Here you can see that, we don’t use any float attributes for the sidebar and content sections. This is the simple logic behind this fixed sidebar theory. The order of the layout is first “Sidebar” and then “Content” in this case for the sidebar to appear on the left. To make the sidebar to appear on the right, then you need to make the reverse order of first “Content” and then “Sidebar” with some adjustments on margin and position.
Here is final product I designed using HTML5 and some CSS3 properties for the web layout using fixed sidebar on the left:
DEMO & Download below:
Please let us know if you have any doubts regarding this layout and other related arrangements, we will help you solve them. Please go ahead and express your views via comments.