1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

A brain buster? Need help achieving a specific layout

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

0
  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