CSS layout problem

Question

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

Welbog · Accepted Answer · 2009-02-20 01:40:21Z

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.

answered Feb 20, 2009 at 1:40

Welbog

60.8k9 gold badges114 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Welbog Over a year ago

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

Collectives™ on Stack Overflow

CSS layout problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related