Reposition Div Above Preceding Element

In this setup http://jsfiddle.net/PRX88/10/ the thrid div understandably appears to the right of the second div, although there's space for it to the right of the first div - it is

Solution 1:

this worked for me.

#wrapper {
        width: 300px;
        background: black;
    }

    #one, #two, #three {
        width: 200px;
        height: 40px;
        background: red;
    }

    #two {
        background: yellow;
    }

    #three {
        width: 100px;
        background: pink;
        margin: -80px0px0px200px;
    }

Hi, I tried with negative margins, the requirement of variable height might get this solution a little tricky. And with IE7 i think you should add position: relative; to the #three div.

So it's a solution, not sure if it fits for you.

Hope it helps. Bye

Solution 2:

I had this problem too, and to be quite honest there is a real simple fix to this which is not logical. You float div 3 to the right, and put the div first in the 1,2,3 order. so they appear: 3,1,2. this way the first thing it does is float right, the next thing it does is float the others left. Confusing? here is the code.

The css part you need to change:

#three {
    width: 100px;
    background: pink;
    float: right;
 }

The HTML:

<div id="wrapper">
    <div id="three"></div>
    <div id="one"></div>
    <div id="two"></div>
</div>

Hope this helps you out!

Solution 3:

your divs (#one, #two, #three) have a total width of 600px (3x200px), giving #three 100px makes a total of 500px - your wrapper only allows 300px, so just change their width to 100px:

#one, #two, #three {
    width: 100px;
    height: 40px;
    background: red;
}

now it's pink :-)

or change width of wrapper to 500px:

#wrapper {
    width: 500px;
    background: black;
}

Find working fiddles here: http://jsfiddle.net/ezmilhouse/zEjaP/2/http://jsfiddle.net/ezmilhouse/39sfD/