From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Setting minimum and maximum widths

Setting minimum and maximum widths - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Setting minimum and maximum widths

On every flexible layout, there comes a point at which the layout just no longer works. You know at the small enough size, columns become too small to hold the content, and the relationship between the elements is lost as they begin to collide and overlap each other. At larger widths, layouts are often not as effective either, because column widths can increase to a size that affects readability, and images and other assets begin to move away from the elements that they represent. So we have a couple of values, the minimum- and maximum-width properties, and those properties allow you to set a range of values for layouts that can still give you the flexibility you want, while ensuring that the layout stays within an effective size. So to demonstrate kind of how layouts fail at various ranges, I've got the fluid.htm file open from the 06_05 directory. If I open this in a browser, you can see it's pretty much the same layout we were working with. We do have a couple of extra elements…

Contents