How to “clear” absolutely positioned elements

Question

Okay, I know that 1) this is probably not possible with CSS alone and that 2) it really shouldn\'t be possible.
Unfortunately, I need to find a way to make it possible d

Answer 1

Actually, it IS possible with CSS, provided you use a technique similar to the "faux absolute positioning" technique which is explained there:

http://www.alistapart.com/articles/fauxabsolutepositioning/

In your case, you could do something like that:

    
    
    
        

        

            

              
Stuff1
            
            

              
Stuff2
            
            

              
Stuff3
            
            

              
Stuff4
            
        
        

    

Using margin-top and margin-left in the exact way you would use top and left in real absolute positioning.

With the following CSS:

.wrapper {
    overflow: hidden; /* To clear contents */
    zoom: 1; /* To fix IE6 bugs with floats */
}

.container {
    float: left;
    margin-left: -100%;
    position: relative;
    left: 100%;
    width: 100%;
}

.stuff {
    float: left;
}

Sure, this would require adding extra containers around items. But you end up with something which behaves exactly like absolute positioned items would do, but clearable.