There are a number of css layout patterns you can use when developing a website. Your design could be of fixed-width or it could be fluid or elastic. It might even be a hybrid layout or be responsive to different devices.
What are the pros and cons of some of the common css layouts available to us? Are some layouts preferred over others?
Note: While you can’t always tell from the screenshots throughout this post I’ve tried to match the screenshot with the layout described below it. You can click through on any of the images to see the site in question and then resize your browser of font size to see how the layouts react.
You’re likely familiar with all of the css layouts below, but to make sure we’re on the same page, let’s quickly define each.
- Fixed-Width — Overall width is fixed with absolute measurements (px). They’re a solution to the lack of control designing for the web.
- Fluid/Liquid — Overall width is set in proportion to the browser window (%). They’re a solution to multiple resolutions.
- Elastic — Overall width is set in proportion to some design element, usually font-size (em). They’re a solution to the control issues with fluid designs
- Hybrid — Using a combination of fixed and either fluid or elastic design elements. They’re a solution to the cons of all 3 layouts above.
- Responsive — Using different stylesheets based on possible ranges of widths of the audience. They’re a solution to the multiple devices and resolutions of our audience.
- Fluid/Elastic Grids — A type of elastic layout that makes use of a grid. They’re a solution to maintaining order inside a dynamic container.
Pay attention to the difference between fluid/liquid layouts and elastic layouts. In both widths are measured relatively.
The difference is that fluid layouts are measured relative to something external to the design (browser window), while elastic layouts are measured relative to something internal to the design (font-size).