0

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!

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
DDiVita
  • 4,225
  • 5
  • 63
  • 117

3 Answers3

1

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   
}
Sandwich
  • 2,304
  • 3
  • 24
  • 30
1

Hope this helps:

<div id="mainContainer">
    <div id="itemIWantToCenter" style="float: right;"></div>
    <div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>
Adam Prax
  • 6,413
  • 3
  • 30
  • 31
0

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>
Steven K.
  • 2,097
  • 16
  • 15
  • This will only work in a small number of situations; dependant on screen size and centered container size. Really curious at to what scenario this is the solution to. – Sandwich Jan 05 '11 at 17:01
  • In this case, the screen size can shrink to 700px before the center & right div will overlap. Since most websites are wider then that, it shouldn't be a problem. I just hope it's ok in @DDiVita's situation :) – Steven K. Jan 06 '11 at 07:22