div右侧的div的填充向左浮动

Question

I have a <div> with a fixed width and height floated left, and to the right of it I have two other <div> s. I want to have one of the <div> s flush against the left-floated <div> 's border, and the other indented slightly. Here is what I have at the moment...

<div 
    id="leftDiv"
    style="border:1px solid grey;
        width:300px;
        height:400px;
        float:left;">
        This is a left floated div with a fixed width and height
</div>

<div id="rightDiv">
    <div id="flushDiv">This should be flush.</div>
    <div id="indentDiv" style="padding:25px">This should be indented.</div>
</div> 

But what happens with the above html is that both the <div> s with id's 'flushDiv' and 'indentDiv' are flush against the right side of the <div> with id leftSideDiv .

I can why this happens when I set a visible border on the rightDiv . It's left side is actually flush with the left side of the leftDiv . And both elements are already padded well over the 25px indentation that I want for indentDiv , so they both end up flush against the right side of leftDiv .

If I float rightDiv right, I get the desired indentation effect, almost. indentDiv is now indented with respect to flushDiv , but flushDiv is no longer flush against the right side of rightDiv .

Ok, I'm not even sure I'm following myself anymore.

Does anyone understand what I'm asking and have a solution? I'll try to sum it up:

How can I have two divs to the right of a left floated div, where one is flush agains the left floated div's right border, and the other is offset?

Answer 1

Is this what you are trying to accomplish? I put borders around them so you can see them... Here is an example on jsfiddle.com

http://jsfiddle.net/hawUs/

<div id="leftDiv" style="border:1px solid grey;width:300px;height:400px; float:left;">
    This is a left floated div with a fixed width and height
</div>

<div id="rightDiv" style=" float:left;">
  <div id="flushDiv" style="border:1px solid grey; float">This should be flush.</div>
  <div id="indentDiv" style="padding:25px;border:1px solid grey;">This should be indented.    </div>
</div> ​​​​​​​​​​​​​​​

Update: You can also change the padding on the div #indentDiv to use margin instead. See example: http://jsfiddle.net/hawUs/1/