Css – How to float two divs side-by-side without specifying a width

css

I have two divs, the first doesn't have much content and the second has a lot of content. I want them to float side-by-side such that the first div is only as wide as the text and the second div fills the remaining amount of horizontal space. And, I don't want to specify fixed widths.

Here is the desired appearance using tables:
http://jsfiddle.net/enRkR/

Can this easily be done with CSS floats, or is a table layout the only way to achieve this look?

Best Answer

Yes, you can do it with css & it's work in all browsers. Do like this:

.right{
    overflow:hidden;
    background:red;
}
.left{
    float:left;
    background:green;
}

Check this live example http://jsfiddle.net/enRkR/8/