CSS layout problem

Question

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

Answer 1

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.