Fluid Floating Elements Wrapped in Container [duplicate]

T开发者_开发技巧his question already has answers here: CSS: Special Fluid Layout Problems (5 answers) Closed 3 years ago.

I have the following test code to play around with:

http://jsfiddle.net/b6QFY/1/

I want the "left" element to be fixed and the "right" element to be fluid within the parent container so that it will grow and shrink as the browser width changes, and not wrap. Seems so simple, but have issues getting something to work.

---

This is what I meant to link to. (I should be getting to bed.)

The core of it:

Padding-left on the container element, absolutely position left element with negative left-margin, and width of 100% on the right element.

To my knowledge this should work in most browsers, except IE6 and possibly 7.

---

you can use display:inline-block;

this article has will help http://www.tjkdesign.com/articles/liquid/3.asp

---

Absolute positioning the left element might be the more comprehensive answer when other things come into play, such as container borders and backgrounds and organic growth of the right element.

See my previous answer.