How do you change the color of this info panel without changing the color of the div?

On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on 开发者_StackOverflow社区the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.

What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.

At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.

I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.

I want to create this black rectangle to take up any whitespace to the left of the post content.

I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `

I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.

Looking into the CSS, it says that everything you said is within its own div:

<div class="info-panel">

With that said, you just make your CSS changes to that class. You'd do something like:

.info-panel {
    background-color: #000;
}

But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.

I just made it look better and keep the same overall width by including the following:

.post-content {
    background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
    padding: 0 4% 30px 1%;
}

.info-panel {
    background: none repeat scroll 0 0 #000000;
    float: left;
    margin-right: 1%;
    padding: 2% 0 2% 2%;
    width: 29%;
}

The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.

It's hard to decipher what exactly you're trying to do, but see if this helps:

.post-content.info-panel {
    background-color: black;
    padding: 4px;
    width: 28%;
}