Centering one div while another div is floated to the right?

Question

Here is my example:

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

The mainContainerwidth width is set to 100%. The itemIwantFloatedRight width is set to 300px. Let's say that the itemIWantToCenter has a width of 200px. How would I center that div while floating the other within the container? Thanks!

Answer 1

You should use a linked stylesheet ofcourse...

<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

Hope this helps:

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

Answer 3

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

The advantages to this solution is that when the parent container's size changes, the content container will expand, while retaining it's margins and the right sidebar will always remain on the right.

Hope this helps.

Note In the fiddle, the content container is a little slim. This is due to the size of the window. Change the size of 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   
}