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

CSS

Posted by Martina Simon
Martina Simon
3,181 Points

CSS vs. HTML - Why is the sidebar overlapping?

I'm trying to replicate a wireframe I have drawn out, but for some reason the 'main-content' div is overlapping the right sidebar.

Positioning is a bug-bear at the moment so any advice would be much appreciated.

Here is my HTML: 

<body>
<div id="container"></div>
<div id="header">This is the header</div>
<div id="sidebar">Sidebar</div>
<div id="main-content">This is the main content</div>
<div id="footer">Footer</div>
</body>

Below is the CSS I have written:

CSS

container {

width: 1000px;
}

header {

background-color: red;
color: white;
display: block;
padding: 0 30px 50px;
}

main-content {

display: block;
border: 2px black solid;
width: 100%;
height: auto;
}

sidebar {

float: right; 
display: block;
border: 2px black solid;
padding: 200px 50px 100%;
}

footer {

display: block; 
background-color: red;
color: white;
clear: both;
}

Any ideas where I'm going wrong?

kkswecpsyl
kkswecpsyl
8,155 Points

Are you using hashtags and dots for your IDs and classes?

If this doesnt solve problem can you provide html code.

3 Answers

Martina Simon
Martina Simon
3,181 Points

It seems the answer was to clear both floated elements in the sidebar div and then add width specifications for the main content and the sidebar.

I suspect there is a more efficient way of doing this, but I'll stick with this for now...

Mark McGuinness
PLUS
Mark McGuinness
Courses Plus Student 26,312 Points
Mark McGuinness
Mark McGuinness
Courses Plus Student 26,312 Points

Hi Martina

You have a few things that aren't quite right,

All of your divs are independent of each other and as you have set your main-content div to 100% width (of the browser window), it will naturally overlap the sidebar

Try changing the main-content div to 50% width and you will see what I mean.

You have also set your container div to 1000px but what did you intend to go into it ? The other divs ?

Try moving the container closing </div> to after the closing div of the footer

<div id="footer">Footer</div></div>

Also to give you some perspective, set the background colour of the container div to light blue.

Then refresh your browser and notice the difference.

This should hopefully put you on the right path if you then experiment a bit more with what you already have :)

Martina Simon
Martina Simon
3,181 Points
Martina Simon
Martina Simon
3,181 Points

Hi Mark,

I realised the div's weren't being contained by anything and rectified this. I also completely removed the width value of the main-content div and now it is stacked below the sidebar.

The container is now 940px and all divs are inside. The main-content and sidebar divs are floated left and right, respectively - how to I get them next to each-other rather than one above the other?