Website Layouts with sidebars

There are many different website layouts that are designed differently, many website layouts choose to have one or more sidebar, but a problem that you many encounter is how can you get the sidebar to be same length as your content? This is a good question, because if your sidebar ends before your content then your website layout will look strange. But there are methods of being able to achieve a sidebar that is the same height as your content. In this Quick CSS segment, im going to show you how you can achieve this effect, it’s pretty simple and basic, but it’s good to know!

First off, pretend your a freelance website designer who has just got a job from a client who wants a two column website layout with the column on the right. This is a two column website layout:


The website layout is two columns because the content counts as one column and of course the sidebar on the right makes two. So we now know what the imaginary client wants, we know need to find a method of doing this with XHTML and CSS. We could use the height attribute in CSS, but this wouldn’t work because in most cases website content lengths always change depending on the content length. For example, the height of the frontpage of James’ Blog will vary depending on how long the summary of each post is. So we can’t predict the height, so using the height attribute is no good.


Infact I’ll not string you along, there is no one special attribute to achieve what we want. The way that im going to show you if by creating a few divs and organisng them in such a way with some CSS code to help get the layout we want.

The XHTML (The Div’s)

We will first need to form the layout, so lets start off by creating our divs. Here’s is how im going to form the layout:

1 2 3 4 5 6

<div id="container">  <div class="sidebar">  div>  <div class="content">  div> div>

We have three divs, container, sidebar and the content. The container div is important here, you’ll see why as we add in the CSS. Go ahead and add in some content to your divs, I used some dummy text like this:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<div id="container">    <div class="sidebar">   <h5>Sidebar content 1h5>   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus vehicula lacus. Donec at tellus.p>     <h5>Sidebar content 2h5>   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus vehicula lacus. Donec at tellus.p>     <h5>Sidebar content 3h5>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus vehicula lacus. Donec at tellus.p>  div>    <div class="content">     <h3>Contenth3>     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus vehicula lacus. Donec at tellus. Phasellus quis justo. Curabitur nec urna. Morbi porta volutpat nisi. Pellentesque malesuada. Cras velit nunc, venenatis sit amet, mollis et, molestie eu, sapien. Ut varius tristique arcu. Nulla interdum lectus id ligula. Cras non elit vitae orci ultrices iaculis. Suspendisse potenti. In quis urna id enim egestas auctor. Morbi orci magna, laoreet ut, mattis vitae, euismod sit amet, leo. Nulla pharetra elit eu mauris. Suspendisse potenti. In scelerisque varius quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam nisi id est vehicula malesuada.p>     <p>Aliquam vestibulum nunc eget eros. Sed elit tellus, suscipit vel, tempor sed, sodales sagittis, metus. Praesent mattis dolor non lorem. Mauris porttitor, ipsum dapibus porttitor suscipit, purus magna sagittis lectus, quis venenatis enim neque sit amet neque. Quisque massa orci, egestas vel, lacinia at, semper a, lacus. Morbi neque. Donec id nunc. Maecenas tincidunt porttitor dui. Donec varius dignissim nulla. Integer elementum imperdiet diam.p>     <p>Vestibulum ultricies ligula vel velit. Duis pharetra sem vitae mauris. Fusce sodales odio eu odio. In hac habitasse platea dictumst. Etiam sed erat vel metus cursus consequat. Fusce faucibus felis in nisi. Praesent nibh purus, cursus accumsan, tristique in, blandit in, massa. Maecenas mattis dapibus nulla. Vestibulum tellus. Sed augue. Fusce dui nisi, feugiat non, tristique et, rutrum at, justo. Cras ac nisi a diam laoreet congue. Aliquam faucibus ante non quam. Vestibulum sodales ligula sollicitudin sapien. Curabitur imperdiet condimentum sapien.p>     <p>Curabitur et tortor vel nisl posuere rhoncus. Proin aliquet est commodo tortor. Quisque dignissim ultrices ante. Curabitur in nulla a leo scelerisque fringilla. Vestibulum vel nisl ut ante imperdiet fermentum. Aenean pulvinar lacus a nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus in elit nec lectus ultrices auctor. Nunc ac odio. Vivamus ligula. Donec urna lacus, venenatis in, aliquet nec, suscipit at, ipsum. Cras tortor lorem, luctus a, dictum sit amet, vestibulum sed, risus. Curabitur cursus ante eget neque.p>     <p>Fusce ullamcorper, mauris nec posuere suscipit, nisi leo cursus risus, eu gravida orci nisl eu arcu. Pellentesque lacinia nisl nec leo. Phasellus suscipit, metus nec blandit ullamcorper, justo metus mattis ligula, non interdum tellus sem at sem. Phasellus interdum. Nam posuere. Curabitur pharetra diam eget mauris. Nulla venenatis ornare felis. In consectetur justo sed orci mollis varius. Pellentesque eu ipsum quis orci ornare cursus. Pellentesque bibendum velit non elit. Sed nisi dui, porta a, pretium ut, vulputate non, felis. Ut magna metus, viverra eu, malesuada a, tempus sed, diam. Duis vestibulum magna nec nulla. Praesent neque ipsum, porta iaculis, tempor eu, egestas semper, neque. Proin tristique. Morbi vulputate. Sed gravida mi at tortor. Aliquam diam nisl, tincidunt nec, convallis egestas, aliquam in, dui. Praesent augue. Integer arcu.p>    div>   div>

Okay so this is the HTML that will form the structure of the layout now for the CSS where it all happens

The CSS:

1 2 3 4 5 6 7

body { background-color:#333333; }   #container {  margin:0px auto; width:900px; background-color: #DEDEDe; }   .content { width:70%; background:#FFFFFF; padding:20px; }   .sidebar { margin-top:20px; width:210px; float:right; }

This is all you need to create the layout we need. And this code, creates this:


But what does it mean? Remember when I said that the container div was important, here’s why. Notice, that the container has a background color but the actual sidebar div doesn’t. If you did set a background color on the sidebar div then it would not be extend to the same length as the content. This is why the container div is important, if you notice the content div has a background color set so it is different to the sidebar. You can still modify various elements of the sidebar, such as padding and margin etc. Just the background color will need to be changed on the container div.


So there we have a simple way to create a two column webiste layout, where the sidebar is the same height as the content.