websites

Infinitize

[Tutorial] Basic Sidebars

Posted on by Ilma

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">
        <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>

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: <img src="URL OF IMAGE"> This HTML tag doesn't need to be closed by </img>
  • 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-contentbut 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.