Min-Max-Width In CSS

I like fluid themes, all my themes are fluid, the other day playing with the min-width, max-width, and just width, I found out something interesting.

My theme has 3 columns, 1 content in left column, and 2 sides bars in right column. If I set both of these width with max-width, the content will shrink to the size of the content page (narrower width).

max-width     max-width

If I set my both columns to min-width, the side-bars pushed all the way down, off the page.

min-width     min-width

min-width

If I set both with just width – everything will fit in place as designed.

width     width

If I set min-width to content column and width to sidebars (right column), the page also display correctly without content shrinking.

min-width     min-width

So, next time when you change your theme CSS, if you run into displaying problem, these min-max may be the cause of it.

Cheers,

Leave a Reply

Your email address will not be published. Required fields are marked *