Problem centering div with css

Question

Hi all,

I'm trying to center a div in my page but I have a very particular layout that doesn't let me center it with regular margin: auto properties. What I have is, basically this:

HTML:

<div id="container">
    <div id="sidebar">
        some text
    </div>
    </div id="content">
        some text
    </div>
</div>

CSS:

#container{
    margin: 0 auto;
    width: 900px;
}

#sidebar{
    float: left;
    width: 300px;
}

#content{
    float: left;
    width: 600px;
}

This centers my container with no problems but what I need is to center the "content" div relative to the width of the screen, here's the site that I'm working on so you can see it more clearly: http://dirtymind.jvsoftware.com/ and an image I made in an effort to better explain my problem: http://dirtymind.jvsoftware.com/img/csserror.png

Does anyone know how to accomplish this? Thanks all in advance.

Answer 1

As far as I know that is not possible the way you want it to be. I would choose between the following options:

1. adding margin-left, say .. 5% to container.
2. constant left-margin

Answer 2

Increase the width of the container by the width of the sidebar, and add a right margin to the content block by the same amount.