CSS: expanding widthsize

Question

Hey. I am working on a simple "design"/box for my site, and i would like to make the width more than it is now. It is 980px now and i would like to make it 1150px, but when i do this, my border with opacity, gets all weird and the box turns to the right(and i want it all in center)

Here's before: http://jsbin.com/obefo3

Here's after: (width 1150px) http://jsbin.com/obefo3/2

How can i fix this?

Answer 1

You should change the width of clear-bg accordingly to the new width. It should be (1150 - 980) = 170 pixels wider. Going from width: 1010px; to width: 1180px;

Answer 2

Maybe try a slightly different structure...and you have a bit more CSS than you need I believe :

<div id="clear-bg">  </div> 

<div id="page">     aa     </div>

and then your css could look like

#clear-bg { width:1150px; margin:0px auto; opacity:0.1; background:#000000; height:500px; margin-top:50px; }
#page{position:relative;height:450px;width:1100px;background:#000000; margin:0px auto; margin-top:-475px;}

(and delete other declarations for those elements...)

Answer 3

Change

#page {
    width: 980px;
    margin: -275px 0px 0px -490px;
    ...
}

to

#page {
    width: 1150px;
    margin: -275px 0px 0px -575px; /* -1150 / 2 */
    ...
}

And change:

#clear-bg {
    ...
    width:1010px;
    margin: -290px 0px 0px -505px;
    ...
}

to:

#clear-bg {
    ...
    width:1180px;                   /* 1150 + 30  */
    margin: -290px 0px 0px -590px;  /* -1180 / 2 */
    ...
}