I'm building a page which is static vertically, but allows the space between page elements to grow when the user expands the window. This works fine. However, I'd like to set a minimum width for the page so that the elements stop shrinking together when the user resizes the window below a predetermined width, to prevent them overlapping.
I think the solution is probably simple, but I can't figure it out. I've set the DIV which contains "Recent News" to 48px from the right, absolutely positioned, and I'd like to set something similar so that it never gets closer than 800px (or whatever) from the left edge of the window.
I can post code snippets, but not sure what CSS would be useful right now.
You can see the problem I'm having here: http://www.cjfoote.co.uk/news/index.html
Yes, min-width
is the correct property.
However, you need to change your layout a little bit in order to use it, because #centre
, #left
, and #right
are all absolute.
You can do better with having the #centre
positioned static
or relative
, with enough padding-right
and padding-left
to place the absolutely positioned #right
and #left
inside it. Then #centre
will naturally consume the rest of the space and you can use min-width
on the body
.