1

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 stopped from appearing above the second div.

How would I get the third div to sit to the right of div one (in the current black space) without:

  • using absolute/relative positioning
  • relying on height values (in my real world example this is variable)
  • without reordering the divs (I understand semantically this isn't best practice but it's for something quite specific)

Thanks

  • Would you be open to using a little javascript? That's going to be the only way possible given your restraints. – two7s_clash Apr 20 '11 at 21:02
  • Yeah for sure, it that's the only way to do it. (although if it is I'll probably completely change how it works so it doesn't rely on javascript - which is probably what I should do anyway tbh as it's not semantically correct) - but I'd still be interested to know? –  Apr 20 '11 at 21:33

3 Answers3

0

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: -80px 0px 0px 200px;
    }

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

omabena
  • 3,561
  • 1
  • 17
  • 13
  • Thanks but you're right, this relies on height values. This wouldn't be possible if you didn't know the height of div one and two. –  Apr 20 '11 at 18:51
0

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!

Luuk
  • 1,999
  • 3
  • 20
  • 27
  • Yes this would work although it misses the **without reordering divs** point. If I could reorder divs I'd just switch divs two and three and it would also work. –  Apr 21 '11 at 09:22
  • with reordering you mean it should always be 1,2,3 instead of 3,1,2? – Luuk Apr 21 '11 at 15:28
-1

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/

ezmilhouse
  • 8,933
  • 7
  • 29
  • 38
  • @ezmilhouse: he doesn't say he wants to move div two, so I assume he doesn't. He just wants three next to one. I'm happy to be corrected though. – two7s_clash Apr 20 '11 at 17:37
  • Yep I know I could fit them into the wrapper if I set all widths to wrapper width/3, but I want their values to remain the smae. I effectively want div two to appear before div three. –  Apr 20 '11 at 18:53
  • so why not be a little clearer on the questions before start down voting? – ezmilhouse Apr 21 '11 at 08:15