Setting minimum and maximum widths


show more Setting minimum and maximum widths provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts show less
please wait ...

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 ...

Setting minimum and maximum widths
Video duration: 7m 24s 8h 57m Beginner

Viewers:

Setting minimum and maximum widths provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts

Subject:
Web
Software:
CSS
Author:
please wait ...