Today, I’m going to be teaching you how to create what I call a ‘Single Double Sidebar. This is one large sidebar, that encases one large sidebar, and Two smaller sidebars. You can view a sample of what I’m talking about by looking at my document here (note, this is not the exact file we’re creating, I rushed creating that one for tutorial purposes). Someone has asked me how to create one of these, and it’s quite simple really.
For learning purposes, I’ve released my version in a .zip for you guys to take a look at. The colors used are to represent the individual sidebars; red is the entire sidebar, dark gray is the single sidebar, and light gray are the double sidebars. You can download the zip file here.
Now, to start our tutorial, we’ll make the base sidebar first. I’m going to be making a 300px sidebar in total. So, lets start off your html file. Remember, type all of this by hand, otherwise it won’t stick in your memory.
<html>
<head>
<title>Double Sidebar Technique</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
<div id=’sideholder’></div>
</body>
</html>Now, what we’ve done in this file is:
- Start a document
- Start the head, and Declare the title
- Called our css document style.css
- Closed our head, opened our body
- Made our base sidebar div, giving it the unique id sideholder
- left empty space for our sidebar content, and the closed the div
- ended the body, and document
Now, our document base is set up. Next, we’ll set up our css file.
#sideholder {
width: 300px;
background: #ff0000;
float: left;
}Now, what we’ve done in this file is:
- started our id sideholder from our html file
- set the width, and background color
- declared it as a floating object
I have not explained any other css tags, such as setting up the body or anything, because I assume you have the knowledge to do it yourselves.
There, our document is now ready for us to create the single, double sidebar. Now, we already have our sideholder, which holds the sidebar. Next, is to create the base of the sidebar, and then style it. Inside our side holder, we’re going to need 3 sections (divs). So, this is what I’ve added inside the sideholder div.
<div id=’top’>
Top sidebar content
</div><div id=’left’>
Left sidebar Content.
</div><div id=’right’>
Right Sidebar Content
</div>Now, what we’ve done here is:
- Started, then ended our top div
- Started, then ended our left div
- Started, then ended our right div
Alright, we’re almost ready. Now we need to style each of our divs to align the way we want them to. So, add this to your style.css
? #top {
width: 290px;
margin: 5px;
background: #333333;
text-align: center;
float: left;
}#top img {
margin: 5px;
}Now, this is continueing our css. What we’ve done here is:
- started the id top from our html file
- set the width, outside margin, and background color
- aligned everything within it to the center
- declared it as a floating object
- set the image files inside the id top’s margin
#left {
width: 130px;
margin: 5px;
padding: 5px;
background: #777777;
clear: float;
float: left;
}
Now, this is styling our left div:
- We started the id top div from our html file
- set the width, margin, padding, and background color
- told the float pattern to clear, and bump this div to the next level down
- told it to float left as well
#right {
width: 130px;
margin: 5px;
padding: 5px;
background: #777777;
float: left;
}
This is the last of our styling, this is our right div:
- ? We started our id right div from our html file
- set the width, margin padding, and background
- declared it as a floating element
And that’s it. You’ve created a single double sidebar. A sidebar with one wide column at the top, and two smaller columns underneath the top column. It’s simple, and again, I’ve included the source files for download.