How to position two divs side by side where the second width is 100%?

Question

I want to achieve this:

width=60px         width = remaining space
|------|    |-----------------------------------|
| div1 |    | Loren ipsun...                    |
|------|    |                                   |
            |                            div2   |
            |-----------------------------------|

Sample html on jsFiddle.

Is it possible to place two divs side-by-side leaving the second div with all remaining space?

Answer 1

Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this:

div.one {
  width: 60px;
  float: left;
}

div.two {
  margin-left: 60px;
}

Keep in mind that the width CSS property on the div only applies to the content, so you need to set the margin-left to be the sum of the width, border, margin, and padding properties of the first div.

Here is the updated version of your jsfiddle. Let me know if you have any questions about it.

Answer 2

Here it is:

CSS:

#container { background: silver; width: 100% }


.image
{
    background: green; color: green;
    width: 60px; height: 60px;
    float: left;

}
.content
{
    background: blue; color: white;
   margin-left: 60px;


}

And on jsFiddle (It's playing up at the moment)

Hope this helps!