CODEWITHSUNDEEP
cssmargincentering
Javier Villanueva
Javier Villanueva

Reputation: 4058

Problem centering div with css

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.

Upvotes: 1

Views: 494

Answers (2)

Alohci
Alohci

Reputation: 82986

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.

Upvotes: 1

bogatyrjov
bogatyrjov

Reputation: 5378

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

Upvotes: 0

Related Questions