css, float and margin

Question

If I have for example html like this:

<div id="left">
  items
<div>
<div id="right">
  items
</div>

and css like this:

#left
{
  float: right;
}
#right
{
  margin-left: 10px;
}

the margin of right block calculating from the left side of screen and not from right border of left div. How I can margin directly from right side of left block?

Answer 1

I prefer to float both left.

HTML

<div id="left">
  <!-- Left Content -->
</div>​

<div id="right">
  <!-- Right Content -->
</div>

<div class="clear"></div> <!-- Clear the floats -->

CSS

#left
{
  float: left;
}

#right
{
  float: left;
  margin-left: 10px;
}

.clear
{
  clear:both;
}

Answer 2

Flip around your divs and apply float: right to both. Working example.

<div id="right">
  right
</div>
<div id="left">
  left
</div>​

#left
{
  float: right;
}
#right
{
    float: right;
    margin-left: 10px;
}​