How to Create a Fixed Sidebar Website Layout?

8 Dec , 2012  HTML & CSS 

Tutorial explaining us how to create a professional looking well designed fixed sidebar in the left with fluid background at the back.

Fixed left sidebar layoutA 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:

DEMO | DOWNLOAD

EXPLANATION:

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:

HTML Markup:

CSS for the Above layout:

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:

DEMOย |ย DOWNLOAD

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.



, , ,

  • thanks a lot for this guide)

  • Finally, I got my solution. I was so frustrating from last many days because i want fixed sidebar layout for my website but i hadn’t succeed. But, Now I got the solutions. I’m really happy. Thanks.

    • Am very happy that this helped. ๐Ÿ™‚ Have a great time.. Thanks for the comment ๐Ÿ™‚

  • nat1971

    What if the side bar expands or/and becoming wider (taller) than the browser window, causing part of the side bar to be cut off? Is it possible to navigate within the side bar?

    • The sidebar is fixed in this case. Hence if the sidebar expands, it wouldn’t be possible to navigate down the sidebar.
      Remove the position: fixed; in the CSS to navigate.

  • Yuriy

    How would you get this particular sidebar to float at the right of the screen instead of the left?

    Thanks!

    • Hi,

      Replace the code (left: 40px;) in the CSS to right:40px;

      You can adjust as per your needs to align perfectly.

  • Zaky Kautsar

    Hi, it’s still not clear where do I paste these codes. I tried to paste them to the ‘add CSS’ in customization but it can’t be applied. And if they were meant to be placed on edit HTML, in which exact directory I place them? And my last question what do I replace on these?

    your css links & meta tags
    sidebar contents here
    main content here

    Please help, I find this guide very neat though. Looking forward for your answer! ๐Ÿ™‚

    • Hi Zaky, May I know which platform are you currently trying to work with? WordPress? Blogger?
      You can download the demo website created. You can check the CSS and HTML used there.
      “What do I replace on these?”
      Ans: IN 1st : Your CSS styles
      IN 2nd: Can be Your Sidebar menu
      IN 3rd: Body of your website.

      Those representation is just the skeleton structure of the demo website created.

      • Zaky Kautsar

        It’s really nice to see your reply! I’m trying on my blogger platform. I’ve downloaded it and I opened the ‘style.css’ file, I tried to paste the codes there to my blog’s Add CSS in customization. But I could not save it. I don’t have idea about these codes.

        for the 1st answer, do I need to put that ‘style.css’ I downloaded in there?
        and for the 2nd & 3rd, ya I got my sidebar menu and body of my website, but I don’t have idea how to place them. If these all are related about codes, I get a real brief explanation, please? Thank you in advance.

        • To add the content of the style.css file, open it, copy the content and paste between Your copied code from style.css and then paste it to your blogger HTML, just before

          IMPORTANT: the styles depends on what you have in your website HTML. The style.css provided in my tutorial is only an example. You need to change your HTML to fit to this style.

  • Delphin

    Hi,how can i make my menu bar stay stick in his position even though i minimize the page. so the menu donยดt go one under the other.Excuse my english