Introduction

Understanding CSS Layouts is a foundation on which User Interface (UI) and User Experience (UI) design depends. Layouts are basically ways of organizing widgets or elements on a web page and as such your layout design have far reaching effects on the look and feel of your application.

It’s worth noting that certain CSS layouts, are most fit for certain situations and not appropriate to use in other situations. That’s why a thorough knowledge of the different layout designs proves to be such a great skill in designing the best user interfaces for different users on different screen sizes.

Also, particular layout designs can with more ease be crafted in CSS when using particular layout methods for example its more natural to create a grid layout using the grid box layout module than using the float layout method

Types of CSS Layouts

Most layouts designed using CSS belong to four major categories and these are;

1. Fixed Layouts
2. Fluid Layouts
3. Elastic Layouts
4. Hybrid Layouts

To create these layouts using CSS, the common modern methods used include;

• Float Layout method: This technique basically uses the CSS float property to float columns as far to the left or right as possible. All columns must have a width attribute set to determine where they stop. The floated elements preserve their normal flow or stack order. This order is changed using negative margins.
• Positioning Layout method: This method uses CSS positioning properties and the width attribute to create columns that are removed from the normal flow of a web page. And as such, there are high possibilities of content overlaps.
• Flex box layout method: This one dimensional technique uses the CSS flex box layout module to position elements either horizontally or vertically. It provides properties that dictate how the flex elements are spaced and aligned.
• Grid layout method: This is a two dimension technique that uses the CSS grid layout module to position elements in rows and columns. It also provides properties that determine how the grid elements are spaced and aligned.

Fixed Layouts

These are layouts that stay put at a particular pixel width regardless of the size of the browser window or text size. The layout width is the same even across various screen sizes. Such layouts are designed to target users of a specific screen size. One layout may be designed to target mobile users and the other tablet or desktop users.

Before creating fixed layouts, two considerations should be at the back of one’s mind. First and foremost, the page width should be picked according to the most common monitor resolution. Most sites are designed to be 960 pixels wide to fit nicely in the most common 1024 × 768 monitor resolution.

Secondly, you also need to decide where the fixed-width layout should be positioned in the browser window. By default, it stays on the left edge of the browser, with the extra space to the right of it. You can also center the page, splitting the extra space over left and right margins, which makes the page look as though it better fills the browser window.

Fixed-width layouts are created by specifying width values in pixel (px) units. Typically, the content of the entire page is put into a div (often named “content,” “container,” “wrapper,” or “page“) that is then set to a specific pixel width. This div may also be centered in the browser window. Widths of column elements, and even margins and padding, are also specified in pixels.

Fluid Layouts

Fluid layouts, also called liquid layouts are the cornerstone of responsive web design (RWD). The page area and columns within the page get wider or narrower to fill the available space in the browser window. In other words, they follow the default behavior of the normal flow. There is no attempt to control the content width; the text is permitted to re-flow as required.

We create fluid layouts by specifying widths in percentage values. You can also simply omit the width attribute, in which case the width will be set to the default auto setting and the element will fill the available width of the window or other containing element.

Elastic Layouts

A third layout approach marries resizable text with predictable line lengths. Elastic layouts expand or contract with the size of the text. If the user makes the text larger, the box that contains it expands proportionally. Likewise, if the user likes her text size very small, the containing box shrinks to fit.

The result is that line lengths (in terms of words) stay the same regardless of the text size. This is an advantage over liquid layouts, where line lengths can get too long, and fixed layouts, where very large text may result in awkwardly few characters per line

The key to elastic layouts is the em, the unit of measurement that is based on the size of the text. An em is 16 pixels. It is common to specify font-size in ems.

In elastic layouts, the dimensions of containing elements are specified in ems as well. That is how the widths can respond to the text size. For example, if the body text size is set to 16 pixels, and the page is set to 40em, the resulting page width would be 640 pixels. If the user resizes the text up to 20 pixels, the page grows to 800 pixels.

Hybrid Layouts

Layouts that use a combination of pixel (px), percentage (%), and em measurements are called hybrid layouts. In many scenarios, it makes sense to mix fixed and scalable content areas. For example, a sidebar that contains a stack of advert banners that must stay at a particular size. You could specify that sidebar at a particular pixel width and allow the column next to it to resize to fill the remaining space.