Search code examples
cssfluidfluid-layoutfixed-width

fluid css but no smaller than a fixed-width

Okay I am looking into fluid css for a map aspect I need to implement on my site. I found this demo that looked like what I wanted:

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-39-fluid-fluid-fluid/

Is there a way to make the left column and right column be fluid so they can expand with larger browser windows. But not be able to restrict below a certain width, say 175px each?

So, if there is more browser space for some users, I want to be able to use it, thus allowing all three columns to be fluid. But the right and left column can't go below a certain width no matter how small the browser window is (excluding mobile browsers, not a mobile app).

Solution

  • use the following tag on the element(s) you want to shrink but go no smaller than 175px;

    min-width: 175px;

    now this is only compliant with IE8 and above IE7 does support it kind of, but it can be a little buggy so you need to be careful using it

    it is fully supported by firefox 3.6+ (maybe earlier), safari, and opera 10+