Centering one div while another div moves right?

Question

Here is my example:

<div id="mainContainer"> <div id="itemIWantToCenter"></div> <div id="itemIwantFloatedRight"></div> </div> 

The width of mainContainerwidth set to 100%. The itemIwantFloatedRight is 300px wide. Say itemIWantToCenter is 200px wide. How would I center this div while floating in a container? Thanks!

Answer 1

You should use a linked stylesheet ...

 <div id="mainContainer" style="width:100%; border:solid 1px red;"> <div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right"> right </div> <div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;"> center </div> </div> 

Answer 2

Here's the fiddle of my solution, and the code below (fixed link)

The advantages of this solution are that when you resize the parent container, the content container will expand, keeping its fields, and the right side panel will always remain on the right.

Hope this helps.

Note. In the fiddle, the content container is a little thin. This is due to the size of the window. Resize the window {hover over the dividers, click and drag} to see the benefits.

 <div class="container"> <div class="content"> centered content </div> <div class="right"> right <div> </div> 

---

 .container { width:100%; position:relative; } .container .content { width:auto; margin:0 200px; background:green; } .container .right { width:200px; position:absolute; top:0px; right:0px; background:#f00; } .content, .right { height:300px } 

Answer 3

Hope this helps:

 <div id="mainContainer"> <div id="itemIWantToCenter" style="float: right;"></div> <div id="itemIwantFloatedRight" style="margin-left: 50%;"></div> </div>