Search code examples
csspositioning

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

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!

Solution

  • 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>