Home/ Questions/Q 8924999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:34:39+00:00

I have a <div> with a fixed width and height floated left, and to

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0