Question

I have a div with a set width (in pixels) that is centered by margin: auto;. How can I position an element to the left or right of this div, with a width that is dynamically adjusting to however wide the margin of the center div is?

Thanks for your help!

Edit: more info…

basically, it’s the following setup:

<div></div>
<div style="margin:auto; width: 950px">content goes here</div>
<div></div>

I want to have the same background image on the left and right of the center div, but a different one in the center div. So how do I align the left and right divs to the, well, left and right of the center div, with a width that covers the entire margin of the center div.

Answer 1

This should work as well… I have made the widths smaller (to fit a jsfiddle http://jsfiddle.net/Neograph734/Vb4Hm/1/). If you you should edit both margin-left’s.

<div style="margin:auto; width: 250px; background: red;">    
  <div id="left_sidebar" style="float: left; width: 200px; margin-left: -200px;">
    <div id="right_sidebar" style="float: left; width: 200px; margin-left: 450px;">

    </div>
  </div>

Content here

</div>

Update:
The content should be below the floating divs