Site Layouts in CSS
Tags: beginners, css
Published: 2020-01-13 14:21:46

---
title: Site Layouts in CSS
published: true
description: A look at the different layouts in CSS
tags: beginners, css
series: FrontEnd Development Zero to Hero 
---
When you browse the web, I'm pretty sure you've stumbled on sites that utilize different layout techniques for their content. You might have noticed this if you visited the same site on desktop then on mobile or by resizing the browser window.

There are different type of layouts in CSS, some are popular than others and in the modern web some are frowned up as being not user friendly. Albeit some _big_ websites still design their site for the desktop and redirect mobile users to a different domain.

In this post we'll discuss the different types of layouts in CSS and its up to you to choose based on the project or the _would be users_ of the site.

We'll make use of a particular website to demonstrate these layout types. The site is _Liquidapsive_. At the time of writing the site is down but, thanks to the [internet archive](https://web.archive.org), we can make use of the site snapshot when it was live.

[Open the snapshot](https://web.archive.org/web/20190602161514/http://www.liquidapsive.com/) and change the layout from the drop down menu at the top right corner to follow along.

<hr>

When we talk about layouts in CSS they are often divided in four categories:

* Static
* Liquid
* Adaptive
* Responsive

###__STATIC LAYOUT__

When a site use static layout for its content, __fixed units are used for sizing elements__ and irrespective of the web browser visiting this the layout will be the same. If you visit this kind of site on mobile, the browser will add horizontal scroll bars.

In today's _modern web_, __users tend to avoid this type sites unless the site provide content that's really valuable to them__.

Lets take an hypothetical example of a site that has a width of `800px` and height of `400px`. If you visit the site on a desktop computer, you'll likely not notice any thing but, __if you resize the browser window or visit the site on mobile, the browser will add horizontal scroll bars__.

Open the web archive snapshot and resize your browser.

![Static Layout in desktop view](https://thepracticaldev.s3.amazonaws.com/i/nxdsaw2a4thyhvq8yssd.png)<figcaption>Static Layout: Desktop view</figcaption>

![Static Layout in mobile view](https://thepracticaldev.s3.amazonaws.com/i/ha40hcwct52dpg54zk56.PNG)<figcaption>Static Layout: Mobile view. Take note of the scroll bars</figcaption>

###__LIQUID LAYOUT__

Liquid layout use relative units for sizing. Example of relative units:

* `ems`
* `%` (percentage)

Another example should clear things up. If you have a site width set to `80%` the site will always take up `80%` of the browser `viewport`. On Desktop this might not be an issue, but __the layout can break if the device is larger that what the author intended and on smaller devices it can result in reading difficulty__.

![Liquid Layout in desktop view](https://thepracticaldev.s3.amazonaws.com/i/e1zylothw6dbp0zml17r.png)<figcaption>Liquid layout: Desktop view</figcaption>

![Liquid Layout in mobile view Text](https://thepracticaldev.s3.amazonaws.com/i/jdeb2en6du686v80eo25.PNG)<figcaption>Liquid layout: Mobile view</figcaption>

###__ADAPTIVE LAYOUT__

This is __similar to to static layouts__ because it uses fixed units like `px` but with a major addition &mdash; [media queries](https://dev.to/ziizium/css-media-queries-14fa).

With the use of media queries, an adaptive layout changes when the browser `viewport` is at certain widths.

Take a look at the code sample below and __please read the comments__.

```css
/**
  * Here we set the header to 100px. This
  * will be the case for smaller devices
  */
.header {
   width: 100px
}

/**
  * When the resolution is at least 480px
  * we change the header width to 480px. Remember
  * we are using px which is a fixed unit
  */
@media screen and (min-width: 480px) {
  .header {
    width: 300px;
  }
}
```

Switch over to the example site and change the layout to _adaptive_ then resize the browser to see the differences.

![Adaptive Layout in desktop view](https://thepracticaldev.s3.amazonaws.com/i/mk0qnltqr0u97ec2x6i0.png)<figcaption>Adaptive Layout: Desktop view</figcaption>

![Adaptive Layout in mobile view](https://thepracticaldev.s3.amazonaws.com/i/zds33mdtp6boy4q4z5dm.PNG)<figcaption>Adaptive Layout: Mobile view</figcaption>

One of the disadvantages of this layout is code maintainability because you have to design many different layouts for different `viewports`.

###__RESPONSIVE LAYOUT__

[Pioneered by web designer Ethan Marcotte](https://alistapart.com/article/responsive-web-design/) in his _A List Apart_ article.

Responsive layout combines the best from both liquid and adaptive layouts with the use of relative units and media queries. Armed with this we can deliver the right layout for each device and `viewport` size.

![A responsive layout scaled to a possible mobile view](https://thepracticaldev.s3.amazonaws.com/i/d5qkjwc3o8egtmmqys64.PNG)<figcaption>A responsive layout</figcaption>

Our next topic is solely about this layout technique.

<hr>

Up next, Responsive Web Design.