Take the 2-minute tour ×

I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.

It's displaying in firebug, but not appearing on the screen.

I'm currently learning CSS so any tips/advice on what I'm missing are welcome.

Any advice available will be gratefully received.

Thanks in advance,

Tom Perkins

You can view my code here: http://jsfiddle.net/tomperkins/v3yqf/

share|improve this question
It always existed, all you had to do was put a line of text inside to see that. –  Daryl Dec 30 '10 at 11:42
Can't you see? The sidebar was in your heart all along! –  Spiny Norman Dec 30 '10 at 11:43
add comment

2 Answers

up vote 2 down vote accepted

Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:

.sidebar {
    background: orange;

See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)

share|improve this answer
add comment

Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)


So, use

<div class="sidebar"></div>
<div class="content"></div>

instead of

<div class="content"></div>
<div class="sidebar"></div>
share|improve this answer
add comment

Your Answer


