Question

If there is a better design approach, or easily searchable phrase I can google, feel free to let me know and I’ll quickly take this down. Unfortunately, I don’t think I am Googling the right terms.

To skip the explanation, there is a link to the fiddle at the bottom.

---

I have a right column that must always be against the right side, and never pushed down.

I have left-side elements that should be inline until they collide with the right column, then they should clear to the next row.

---

I assumed this could be done by floating the left-side elements to the left, and my right column floated to the right. I can’t clear any single left-side element because each left-side element is of variable width.

HTML

<div class='left-el'>
    <ul>
        <li>Variable width</li>
        <li>Variable height</li>
        <li>Left margin must always be against left-side</li>
    </ul>
</div>
<div class='left-el'>
    This column needs to move to the next<br/> 
    line since there is no room left. <br/>
    Instead, it pushes the right-floated div down<br/> 
    to make room.
</div>
<div id='right-col'>
    <ul>
        <li>Variable width</li>
        <li>100% height</li>
        <li>Right margin must always be against right-side</li>
    </ul>
</div>​

CSS

.left-el {
    background-color: orange;            
    float: left; 
    margin-right: 10px;
}

#right-col {
    background-color: green;
    float: right; 
    height: 100%;
}​

Conditions

• Right col must always be aligned to the right
• Right col must be variable width
• Left elements must be variable width
• Left elements should never interfere with right col

This is what I’ve been working with: http://jsfiddle.net/TmSuD/ (markup from above)

Perhaps a table is appropriate here?

Answer 1

I believe that if you put the right column above the left columns in html it will do what you want.