Positioning The Sidebar

This section will show you how to position the sidebar(s) for your layout. I own the rights to this tutorial courtesy of Plasteeq. Let me know if you need help.


Below is the sidebar coding I use, I'll explain what each code means and what it's purpose is.



Position - The most common uses of the position tag are absolute and relative. I find absolute easier to work with so if you're a beginner then this may be the better option for you. Relative is slightly more complex and can be a little harder to understand, they don't have much difference but either way I've always found absolute coding much more simple.

Top - This defines how close or far from the top of the screen you want your sidebar to be. If you want it quite close to the top then enter a low number such as 10px or 15px etc. If however you want it further away from the top then enter a higher number such as 50px or 70px.

Left - This code is similar to the "top" coding but instead of it altering how close or far from the top, this code alters how close or far to the left the sidebar would go. As before, if you want it close to the left side of the screen enter a low number such as 5px or 10px. If you want it further away from the left side of the screen then enter a higher number such as 70px or 80px.

Width - This code defines the width of your sidebar e.g. 800px would then make the sidebar 800 pixels wide. This number can be altered to your personal liking.

Background Color - This allows you to customize the background color to match your layout, this code is optional and if you want it to have no background colour then either leave it blank or delete it. For those who want a background color you need to either type the name of the code e.g. background-color: black; or you can enter the 6 digit hex code e.g. background-color: #000000; (black).

} - This is a mandatory code. Without it, the entire style sheet could go wrong. You must make sure you put one at the end of every section of coding (all codes provided for this tutorial have them done for you, therefore this is only to be used as a future reference when you go solo on your first layout)

If you want more than one sidebar, you simply copy and paste the 1st sidebar's coding and paste it directly underneath the } tag. Then re-name it to #sidebar2 {. After that you just have to change the top, left and width to position it where it should go.

This section of the tutorial has now been covered. You may proceed to the next stage.