Keep floating divs on same line

Question

How do i keep two elements in the same row with fixed right column? I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column..

Example: http://jsfiddle.net/Jbbxk/2/

Is there any pure CSS solutions?

NB! Wrap div must have dynamic width! For demostration purposes it has fixed witdh, so it will wrap.

Cheers!

Answer 1

This is one common way of doing what you want:

.wrap {
    position: relative;
    margin: 5px;
    border: 1px solid red;
}
.left {
    float: left;
    background-color: #CCC;
    margin-right: 48px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-color: #888;
}

Explanation:

• The fluid left column fills the whole width but saves space for the right column with margin-right: [right column width];
• The fixed right column is placed at an absolute position at top 0, right 0 (its correct place)
• The wrap div is assigned position: relative so the right column position is determined according to it.