A brain buster? Need help achieving a specific layout

Discussion in 'CSS' started by ehudros, Mar 29, 2009.

  1. #1
    Hi all,
    I have a (tricky?) layout I'm trying to achieve, which is composed of floating boxes that need to be aligned into left and right columns, but without wrappers/container.

    to illustrate, here's a quick demo:
    
    <div style="width:800px">
        <div style="width:600px; float:left; border:1px solid black; height: 300px">1</div>
        <div style="width:190px; float:right; border:1px solid black; height: 100px">2</div>
        <div style="width:600px; float:left; border:1px solid black; height: 200px">3</div>
        <div style="width:190px; float:right; border:1px solid black; height: 100px">4</div>
    </div>
    
    Code (markup):
    I wish that the right floating boxes will stack on the right, and the left ones on the left.
    Obviously there are tons of options to do this - but I need the structure to stay as it is (meaning I can't change the order of the divs).

    Any suggestions would be appreciated it :)

    PS - the boxes are dynamic, so I can't use a negative margin on the to pull the upwards
     
    ehudros, Mar 29, 2009 IP