Jamie Balfour BSc

Welcome to my personal website!

Technology enthusiast

I am very interested in technology, particularly relating to computer science. I am most interested in web design and development.

My main hobby is programming. One of my most well known products from this is ZPE. I also am the sole creator of BalfBlog, BalfBar and BalfSlider.

A little bit about me

In 1997, when I was six years of age, I got my very first computer. I was always very interested in the ins and outs of it and dismantled it to see how it worked.

Years later, in 2016 I received my BSc (with honours) in Computer Science, obtaining a First class degree.

I'd like to welcome you to my website and hope you enjoy using it as much as I have enjoyed building it!

Google Plus
Me
Jamie Balfour BSc
Full stack developer
Saturday 5th March 2016 at 18:03
Sometimes it's a pain building a webpage with a sidebar. It took me long enough to get my own sidebar the way it is. This article explores the ways in which this can be done and which solution offers the best approach.

Introduction

Building a sidebar on a website can be a very difficult task, especially if the sidebar is designed to stretch the whole height of the container.

There are many ways to construct a sidebar and this article aims to cover just a few of those that work well.

A look at the issue

Currently, a lot of sidebars use the CSS float property. This works well based on two things. The first of those is that the sidebar does not need to sit along side another block element. If it does, the situation complicates when the sidebar has more content than the main content.

Below is a sample of a floated sidebar:

This is the sidebar
This is the main content

The above sample has the following code:

HTML
<div  style="background: green; padding: 5px 0">							
	<div  style="float:left; background: #ddd; width:33%;">
		<div  style="padding:15px;">
			This is the sidebar
		div>
	div>
	<div  style="min-width:67%; background:#f0f0f0">
		<div  style="padding:15px;">
			This is the main content
		div>
	div>		
div>		
						

If the same style of sidebar has a sidebar with more content than the main content, then there is a huge issue with the content of the sidebar not increasing the size of the owner container.

This is the sidebar.
This is another line of text inside the sidebar.
This is the main content

The above sample has the following code:

HTML
<div  style="background:green; padding: 5px 0">							
	<div  style="float:left; background: #ddd; width:33%;">
		<div style="padding:15px;">
			This is the sidebar<br>This is another line of text inside the sidebar.
		div>
	div>
	<div  style="min-width:67%; background:#f0f0f0">
		<div  style="padding:15px;">
			This is the main content
		div>
	div>		
div>
						

The thing to note is that in the sample, the sidebar flows outwith the container. This is the main problem with floating a sidebar.

The other main one occurs if you want the sidebar to stretch the height of the main content.

This is the sidebar.
This is the main content.
You can see it is a few lines long.
This means that the sidebar looks like it's just meant for the top and it is just a floating element.
HTML
<div  style="background:green; padding: 5px 0">							
	<div  style="float:left; background: #ddd; width:33%;">
		<div  style="padding:15px;">
			This is the sidebar<br>
		div>
	div>
	<div  style="min-width:67%; background:#f0f0f0">
		<div  style="padding:15px;">
			This is the main content.<br>You can see it is a few lines long.<br>This means that the 
			sidebar looks like it's just meant for the top and it is just a floating element.
		div>
	div>		
div>
						

A couple of solutions

There are many ways to implement the sidebar effectively.

The following samples use the following HTML:

HTML
<div  style="background:green; padding: 5px 0" id="container">							
	<div  id="sidebar">
		<div  style="padding:15px;">
			This is the sidebar<br>
		div>
	div>
	<div  id="main_content">
		<div  style="padding:15px;">
			This is the main content.<br>You can see it is a few lines long.<br>This means that the 
			sidebar looks like it's just meant for the top and it is just a floating element.
		div>
	div>		
div>
						

1: Using JavaScript

The simplest solution to a whole collection of problems is always to use JavaScript. JavaScript for rendering should be avoided where possible, but it's one such solution to this problem (in this case, I am using jQuery to save time):

JavaScript
var  sH = jQuery("#sidebar").height();
var  mH = jQuery("#main_content").height();
var  fH = 0;
if(sH >= mH){
	fH = sH;
} else{
	fH = mH;
}
jQuery("#sidebar").height(fH);
jQuery("#main_content").height(fH);
						
This is the main content.
You can see it is a few lines long.
This means that the sidebar looks like it's just meant for the top and it is just a floating element.

Resizing this element will not affect it in the same way as before, but it is far from perfect since it fails on resize.

2: Using absolute positioning

Absolute positioning often fixes a variety of issues on modern browsers but messes up older browsers such as Internet Explorer 8.

I say this because absolute positioning is actually one of the easiest ways to make an element the exact size that you want and in the exact place that you want. This is why this solution actually works well for this problem.

This solution works well also because it forces the sidebar to stretch the height of the page and works with fixed width sidebars and scalable sidebars (I used this solution for a while since it worked well).

The first step is to make the container element relative:

CSS
#container {
	position: relative;
}
						

The next step is to make the sidebar position absolute and stretch from top to bottom. This example shows a right-hand sidebar:

JavaScript
#sidebar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 320px;
}
						

The final step is the main content. Leaving the main content as a full width division, setting the right hand margin will force it to ignore the sidebar:

CSS
#main_content {
	margin-right: 320px;
}
						

This leaves space on the right hand side for the sidebar. The sample below shows how this looks

This is the main content.
You can see it is a few lines long.
This means that the sidebar looks like it's just meant for the top and it is just a floating element.

So whilst this solution works reasonably well, it's biggest problem comes from when the sidebar is taller than the main content division.

One such solution is to set a minimum height on the main content division.

3: Using tables

I would never suggest using this solution. It is here only for completeness sake. Tables should be avoided for layout and used only for semantic meaning.

This is just a solution, but you really could just nest everything in a table. I do not think this counts as a real life solution for obvious reasons.

4: Using the table layout option

This is my favourite, since CSS can make elements behave in the same manner as a table. This is the way I currently use on my website for many reasons:

  • Both the main content and sidebar will be the same height
  • There are no set heights on either the sidebar or main content
  • The width of either or both of these elements may be fixed
  • It is easy to switch to a responsive mode
  • It is supported on older browsers reasonably well

Number 1 and 2 are the most crucial points here, particularly with websites like my own website where both the main content and sidebar vary massively across different pages.

Most important is to set the layout to table and make sure it is fixed:

JavaScript
#container {
	display: table;
	table-layout: fixed;
}
						

The next step is to make sure that the sidebar and main content are table cells:

CSS
#main_content, #sidebar {
	display: table-cell;
}
#sidebar {
	width: 320px;
}
						

Below shows this in action:

This is the main content.
You can see it is a few lines long.
This means that the sidebar looks like it's just meant for the top and it is just a floating element.

The greatest thing is the fact that it is compatible with browsers as far back as Internet Explorer 6.

Conclusion

There are many other options for building a sidebar, but some of those like using a flexible grid are not widely supported.

I stick by the the fourth solution given as the best option.

Site accessibility

A lot of the original functionalities that once existed here have been removed.

This page was generated in 0.24 seconds using 2097152 bytes. Slow? Let me know.

To use project mode, the window must be greater than 920 pixels in width.
Click here to disable Project Mode.
This site uses cookies to deliver its services, to personalise ads, to store preferences and to analyse traffic. Information about your use of this site is shared with other companies. By using this site, you agree to its use of cookies.
Contact me
Contact Jamie Balfour

Get in touch with me via this form.