Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Building a webpage with flexible sidebar(s)

Building a webpage with flexible sidebar(s)

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.

Posted by jamiebalfour04 in The Web
sidebar
building
website
design
Comments
Powered by DASH 2.0
Scan and keep for the latest article or review every time!
https://www.jamiebalfour.scot/redirect/action/latest-article/