CSS layout problem

Hi,

At the top of this webpage, there are two elements in the main content area (white background): an image and a logo box.

The logo box is floated right and the image has a right-margin which is sufficiently large to accomodate the logo box and a little padding. However, if you make your browser window sufficiently narrow, the logo box slides underneath the image. What I would like to happen is that the horizontal space between the two decreases to a minimum of 6 pixels, and if the browser window is made any narrower, horizontal scrollbars appear.

Is there any way that I can achieve this without resorting to a completely 'frozen' layout, i.e. setting a fixed width on the main content area?

Thanks, Don

From stackoverflow

• The css min-width property does what you want. Doesn't work in IE 6, though. For that some JavaScript can help out if it's really necessary.

  Set the white DIV's min-width to the size of the image + the border.

  Don : works perfectly, thanks a lot!

  Welbog : Glad to help anyone design a fluid-width layout :)

  alex : @Welbog : spread the css! :)