Sidebars are used often in web design, especially for blogs. Creating sidebars are fairly easy, but it’s always good to learn the basics of creating something, especially for those who have only started to learn how to code. So I decide to make some tutorials for layouts and so my blog won’t be so empty, haha. So there are several types of sidebars that I use often, a full-fixed sidebar, a floating sidebar, and a sidebar for contents. You can see the demos of those sidebars here.
1. Full-Fixed Sidebar
Examples of Use: Tumblr Base Code 01, Empty
The HTML setup:
<div id="sidebar">
<img src="http://i.imgur.com/UbZizRW.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dapibus lacus. Pellentesque nisl mauris, fermentum sed suscipit id, pharetra quis quam. Vestibulum ante dui, pellentesque eu ligula sed, semper convallis sem. Nunc nunc lorem, venenatis vel urna id, imperdiet facilisis tellus. Morbi lacinia vel ipsum id vulputate. Quisque pharetra blandit magna, sed vestibulum nunc efficitur at. Phasellus scelerisque efficitur ex, et imperdiet lectus viverra non.
</div>Explanation:
- sidebar: is the container of the sidebar, will be styled in CSS as #sidebar (if it’s a class, then it will be written as class=“sidebar” in HTML and will be styled in CSS as .sidebar)
- sidebar-content: is the container of the sidebar content. I added this div so I can easily style the content.
Basic HTML used for this sidebar:
- div: is usually for containers of contents. in HTML5, can be replaced with section
- img: for showing images. Basic format:  This HTML tag doesn’t need to be closed by
- p: short of paragraphs. This adds margins between paragraphs or between the paragraph and other content.
The CSS Setup:
#sidebar {
width: 300px;
position: fixed;
top: 0;
left: 0;
height: 100%;
background: #eed318;
}
#sidebar>#sidebar-content {
background: #ffffff;
padding: 1em;
margin-bottom: 1em;
}Explanation:
#sidebar is to style html tags that has id=“sidebar”.
#sidebar > #sidebar-content is to style html tags that has id=“sidebar-content”. In this case, we can write only #sidebar-content, without the ‘#sidebar >“. We can also write it as #sidebar #sidebar-content.
I used #sidebar > so it will only style the id=“sidebar-content” that is directly under id=“sidebar”. ’>’ is used in CSS to style the first/direct children of a div/section parent. For example, in the above HTML code, sidebar-content is directly under sidebar, so it’s the first/direct children of sidebar. If we use #sidebar > #sidebar-content**, **but our HTML code is like this:
<div id="sidebar">
<div>
<div id="sidebar-content"></div>
</div>
</div>Then the sidebar-content won’t get styled because its parent is div, not #sidebar. If I use only #sidebar or #sidebar #sidebar-content. then it will get styled.
Basic CSS used:
- width: the width of the div/section.
- height: the height of the div/section. 100% means we want the sidebar to cover the whole height of the window.
- position: the position type of a div/section according to the window/screen. Fixed is used when we want our content to stay in the page even when we scroll to the bottom.
- top/left/bottom/right: the position type of a div/section according to the window/screen/parent. It can be used when we use fixed/relative/absolute positioning. For example, top: 10px means 10 px from the top side, and left: 10px means that 10 px from the left side.
- background: the background of the sidebar/content. We can put hex/rgb/rgba colors, or an image. To use an image, use this format; background: url(IMAGE URL);
- padding: the space between the side of the div/section to the content inside of that div/section.
- margin-bottom/margin-top/margin-left/margin-right/margin: the space between the div/section to another div/section around that former div/section.
Note:
Since the sidebar is fixed, it will cover the rest of other contents. To avoid this, set the margin left of the div that contains your content as the width of the sidebar + the distance between the sidebar and the content. (ex: 300px + 100px = 400px)
2. Fixed Floating Sidebar
Examples of Use: Madness, Farfalla
This sidebar has the same HTML as the above code, with only a slight difference in the CSS.
The CSS Setup:
#sidebar {
width: 300px;
top: 100px;
left: 10%;
position: fixed;
}
#sidebar>#sidebar-content {
background: #ffffff;
padding: 1em;
margin-bottom: 1em;
}In this sidebar, we set the top and left css instead of setting it to 0 like in full fixed sidebar. You can put percent, pixels, or em.
Note:
Since the sidebar is fixed, it will cover the rest of other contents. To avoid this, set the margin left of the div that contains your content as the distance between the side of the screen and the sidebar + the width of the sidebar + the distance between the sidebar and the content. (ex: 100px + 300px + 100px = 500px)
3. Normal Sidebar
Examples of Use: Woolliment
The HTML Setup
<div id="content">
<div id="sidebar">
<div id="sidebar-content">
<img src="http://i.imgur.com/UbZizRW.png">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dapibus lacus. Pellentesque nisl
mauris, fermentum sed suscipit id, pharetra quis quam. Vestibulum ante dui, pellentesque eu ligula sed,
semper convallis sem. Nunc nunc lorem, venenatis vel urna id, imperdiet facilisis tellus. Morbi lacinia
vel ipsum id vulputate. Quisque pharetra blandit magna, sed vestibulum nunc efficitur at. Phasellus
scelerisque efficitur ex, et imperdiet lectus viverra non.
</p>
</div>
<div>
<h2>
Another Content
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dapibus lacus. Pellentesque nisl
mauris, fermentum sed suscipit id, pharetra quis quam. Vestibulum ante dui, pellentesque eu ligula sed,
semper convallis sem. Nunc nunc lorem, venenatis vel urna id, imperdiet facilisis tellus. Morbi lacinia
vel ipsum id vulputate. Quisque pharetra blandit magna, sed vestibulum nunc efficitur at. Phasellus
scelerisque efficitur ex, et imperdiet lectus viverra non.
</p>
</div>
</div>
<div class="post">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium metus in dui mollis, eget porta
velit porta. Etiam vel dolor sit amet nulla ultricies semper. Nam eu suscipit sapien. In justo est, dapibus
vel euismod vel, dapibus cursus risus. In venenatis ex non finibus consectetur. Curabitur nec leo bibendum,
auctor nisl sit amet, imperdiet urna. Mauris fringilla velit sed dictum porttitor. Quisque id sem et nibh
molestie semper ac vel risus. Nulla nec ante in est luctus molestie. Nam varius mauris et odio semper, ac
porta elit auctor. Fusce tellus sapien, eleifend non urna quis, scelerisque dignissim ipsum. Nunc dolor
diam, semper nec aliquet id, bibendum in odio.
</p>
<p>
Aliquam tempor mollis luctus. In in odio fringilla nulla fringilla ultrices at et lacus. Pellentesque
pulvinar finibus odio vitae auctor. Donec efficitur arcu at suscipit euismod. Nullam ut varius erat. Sed
eleifend elit diam, eu fermentum elit pretium id. Nam lacinia libero vitae fringilla facilisis. Nunc felis
tellus, fermentum elementum dui id, suscipit posuere mauris.
</p>
<p>
Vestibulum ex nibh, pulvinar vitae sollicitudin et, euismod vel sapien. Cras non finibus ligula. Aenean at
nisl faucibus, ornare felis ac, ullamcorper enim. Praesent tincidunt et arcu vitae hendrerit. Proin rhoncus
lectus eros, nec congue sem commodo et. Ut sit amet rutrum lacus. Praesent aliquet malesuada eleifend.
</p>
<p>
Praesent id feugiat dui. Vestibulum lobortis, arcu sed feugiat faucibus, dolor lectus porta velit, a
vestibulum arcu nunc sit amet mi. Morbi pharetra eu neque ut vehicula. Nulla bibendum hendrerit massa, id
commodo ipsum scelerisque a. Sed ultricies lacinia nunc, ut tincidunt odio facilisis quis. Morbi felis
turpis, auctor ac accumsan quis, auctor eget purus. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Vivamus risus diam, commodo id laoreet ut, laoreet a tortor. Donec vel velit
interdum, porttitor ante ut, semper mi. Nullam justo sem, suscipit non dolor ac, sollicitudin volutpat
libero. Aliquam id nisl rutrum, sollicitudin ipsum nec, dignissim ipsum. Mauris accumsan arcu vel est
tristique, quis commodo nulla dignissim. Suspendisse auctor tincidunt accumsan. Aliquam eleifend lacus id
felis sagittis, ac tempus nibh condimentum. Ut aliquet elit eget iaculis porttitor.
</p>
<p>
Integer egestas enim ex, a ultrices augue placerat in. Nam suscipit, est eu accumsan faucibus, risus elit
laoreet est, sed iaculis arcu metus ut nunc. Donec quis erat sed risus tempor scelerisque. Aliquam porttitor
turpis sed sagittis finibus. Ut sed volutpat elit. Morbi auctor id massa sed bibendum. Mauris quis dui
ornare metus feugiat pharetra at sit amet risus.
</p>
</div>
</div>Explanation:
- content: is the container of the sidebar and our content.
- sidebar: is the container of the sidebar, will be styled in CSS as #sidebar (if it’s a class, then it will be written as class=“sidebar” in HTML and will be styled in CSS as .sidebar)
- sidebar-content: is the container of the sidebar content
- post: is the container of the contents other than sidebar
The HTML tags used in this part has all been explained in part 1.
The CSS Setup:
#sidebar {
width: 300px;
float: left;
margin-right: 2em;
}
#sidebar>div {
background: #ffffff;
padding: 1em;
margin-bottom: 1em;
}
.content>.post {
float: right;
width: calc(100% - 300px - 4em);
}There are several ways to create this kind of sidebar: 1. using floats, 2. using grids. In this one, I am using floats to create the sidebar, which is currently the most used method and the ones most browsers can support.