Annoying css+div layout

I've got a problem with a css+div layout. I need to set the background div to resize to left left, and keep the content position at the center. Look at the picture:

Layout div

As you can see, I need to keep the space on the right fixed, but also the content needs to be centered, a开发者_开发问答nd the background needs to expand only to the left, is it possible at all?

I've quickly made an example: http://jsfiddle.net/N73QA/

Let me know if You got any questions.

maybe you need this

#content{
 float:right;
 margin-right: 10px; /* or more */

 width: ......
}

that will keep your content to the right; the margin-right might need to be bigger then 10px to make it look centered

Not sure I understand exactly (your question seems to conflict with the diagram), but can't you wrap everything in a div that's 50% screen width?

Style:

#wrapper { width: 50%; }
#header, #bg, #footer { background: #46F; margin-bottom: 1em; }
#header { clear: both; float: right; height: 80px; width: 90%; }
#footer { clear: both; height: 80px; margin-top: 1em; }
#bg { clear: both; float: right; padding: 20px; width: 100%; }
#content { background: #ABF; clear: both; float: right; height: 400px; padding: 20px; width: 80%; }

Markup:

<div id="wrapper">
    <div id="header"></div>
    <div id="bg">
        <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sollicitudin sodales turpis et ultricies. Sed in enim ligula.
        </div>
    </div>
    <div id="footer"></div>
</div>

The wrapper is 50% of the screen, while the content can be fixed or a percentage of that. Everything floats to the right within the wrapper.