CSS for Layout

Since even the early days of the Web, layout has been a challenge.

Layout Types

We used to use <table> and <frameset> elements to layout our pages. Those days are past. The <frameset> and associated elements were deprecated in HTML5 and <table> elements are meant for tabular data, not to layout pages. There are much better ways to make the same effect using CSS.

Beyond the <table> element, much layout was done using positioning and floats:e the primary ways that sites were laid out for a long long time.

Fluid Layout

This is the way that a web page will perform naturally. The content just fills the width of whatever screen it’s on.

Fixed Layout

Table-based layouts gave more options. Using tables, it was possible to set the web page to a fixed width. All of the content would be put into a table, and the table’s width would be set to a fixed width. Everyone would see the same page, but, if your visitor used a screen that was 640 pixels wide, and your table was set to 800 pixels wide, your visitor would have to do some side scrolling to really see all of the page. At the time, we either designed for the smalled possible screen size, or we just targeted the most popular screen size and crossed our fingers.

It would be rare to find a fixed layout on a modern website.

Elastic

A fluid layout is a type of webpage design in which layout of the page resizes as the window size is changed. With the addition of CSS, things slowly began to shift. The site would fill the entire screen and could be designed for the smallest screen size, but then, through the magic of tables and percentages, the wep page would fill the larger screens as well.

Responsive

Some variation of Fixed, Fluid, and Elastic remained the three basic layout types for a long time. Online mobile sites were less of a concern, and when attempted at all mobile users were usually directed to a completely different website. With the addition of new properties like max-width, new css functions like calc and clamp, and media queries, design shifted away from the “pixel perfect” design to be more flexible to be able to handle a variety of different devices.

Hybrids

There’s no reason you couldn’t mix these types together. Your first section of your web page could fill the entire screen, the next section could be centered fixed width

Single column

A variation of the single column layout which became popular when responsive design began, sometimes called a parfait layout, stacked blocks on top of each other. It was just a natural extension of how mobile first responsive design made the web media work.

2 Column Layout: Sidebar

A classic web page layout. A bar on the left side of the page (or on the right side for right-to-left reading languages) contained the site identification and navigation, while the rest of the page contained the site content.

3 Column Layout

Frequently used for magazine sites.

The 12-Column Grid

The 12-Column grid was a design practice that became popular just at the same time as mobile-first resposive design kicked off, which essentially nullified it. The theory is that based on your screen width, you”d break your page into 12 columns. Elements within the grid would line up, making for a more visually appealing design.

Layout Properties

Float

float was the primary means of making layouts work. The element will cling in a direction, allowing text elements to flow around them. Issues with how content would wrap around the effected elements would require the uses of additional CSS (like the clear or overflow properties) so that the page would look right.

Positioning

Positioning is best used for layer-type effects for componets, widgets, and navigation.

position absolute, relative, fixed, sticky

z-index

top

left

right

bottom

Transformations

Translate

Rotate

Scale

Skew

Perspective

Display

Additional values that can be used in display are flex and grid. These settings were added to give additional control over a page’s layout.

Flexbox

display: flex;

More information: A Complete Guide to Flexbox.

Grid

display: grid;

More information: A Complete Guide to Grid.