Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by imogenherbert
imogenherbert
1,298 Points

how do you make a sidebar

I would like to now how to make a sidebar on my website can you help imogenherbert

3 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

You would need to create two div's call one main and the other sidebar. you would need to float one to the left and float the other to the right. it depends on your layout where you would want your sidebar to show. Below is just for display purposes only but you can see what it would look like. 

<div class="wrapper">
  <div class="main"></div>
  <div class="sidebar"></div>
</div>

.wrapper {
  height: 600px;
  margin: 0 auto;
  max-width: 960px;
  background: #ccc;
}

.main {
  height: 100%;
  float: left;
  background: #2b2b2b;
  width: 660px;
}

.sidebar {
  height: 100%;
  float: right;
  background: #333;
  width: 300px;
}
imogenherbert
imogenherbert
1,298 Points

thanks Chyno Deluxe

the sidebar is all working fine now :)

Chyno Deluxe
Chyno Deluxe
16,936 Points

Glad i could help

imogenherbert
imogenherbert
1,298 Points

Hi Chyno Deluxe

when i type in ( float: left;) it does not go right to the left side it has about a 9cm gap how do you get it right to the left side

imogenherbert

Chyno Deluxe
Chyno Deluxe
16,936 Points

Are you using the same code i provided? If not can you post your html and css.

imogenherbert
imogenherbert
1,298 Points

yes

but wrapper main makes a big square but the sidebar is the only thing i need

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

In order to use my code. remove the height declarations and the background colors. those where just put there for visual aid. would it be possible for you to send a screenshot of what you see? Here's an idea of what it should look like. CSSDeck

Mireille Bonapart
Mireille Bonapart
5,254 Points
Mireille Bonapart
Mireille Bonapart
5,254 Points

Thanks Chyno, I had the same question. I have been struggling with this for a while now. I was wondering, because the sidebar is used for navigation. Why not use <nav></nav> in html? Your example looks easier to understand and in the courses/tutorials I haven't found an explanation for a sidebar or vertical navbar. Or maybe I've overlooked it somewhere?

Chyno Deluxe
Chyno Deluxe
16,936 Points

Sidebars are typically used for secondary navigation meaning second tier navigation. For example lets say you run a blog. Your sidebard will most likely be used to navigate through post categories and subcategories while your main nav will house important Web pages such as the home page, blog page, and contact page.

But really there is no real set direction as to how your site should look. If you want your sidebar nav to be your main nav, than you can design it that way.