Category Archives: Responsive Web Design

Horizontally and vertically fluid CSS „web app“ layout

Recently I was faced with the task of developing a CSS layout that would be both horizontally and vertically fluid. A typical „web app“ layout. I did a little research and was surprised that it was possible to do this with CSS only.

It was even possible to combine elements of a fixed width or height with other elements that would resize based on percentage values. The technique I used is a combination of floating containers with sizes based on percentage values and absolute positioning for the fixed size elements. Nesting these kind of classes and elements you can build basically any layout that needs to fill the screen and has both fixed sized and flexible parts.

Let’s do an example

Here is a sketch of a „web app“ layout we could build using this technique:

fluid web layout sketch, shows an outline of the layout, with fixed parts and fluid parts

As you can see, there will be a main header with a fixed height. Below that is a sidebar with a fixed width and a second header with a fixed height. The rest of the layout contains a fluid grid, whose elements will resize based on percentage values. The whole layout will fill out the browser window at any time, no matter how big or small it is (in reality you probably would have a maximum size for your app layout though).

Now let’s do some CSS

First to the fixed parts:

.fixed-header-main {
    height: 120px;
  }

  .fixed-container-outer {
    position: absolute;
    top: 120px; /* same as main header height */
    right: 0px;
    bottom: 0px;
    left: 0px;
  }

  .fixed-sidebar {
    display: inline-block;
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 80px;
  }

  .fixed-container-inner {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 80px; /* same as sidebar width */
  }

  .fixed-header-lower {
    height: 80px;
  }

Under the header you’ll find the fixed-container-outer that is positioned by absolute positioning to stick exactly under the header. In it you’ll find the sidebar with a fixed width and next to it another container fixed-container-inner again positioned by absolute positioning to stick right to it.

Then we have the flexible grid:

.flexible-grid-container {
    display: inline-block;
    position: absolute;
    top: 80px; /* same as inner header height */
    right: 0px;
    bottom: 0px;
    left: 0px;
  }

  .flexible-grid-unit {
    display: inline-block;
    float: left;
    height: 33.33%;
    width: 50%;
  }

Right under the lower header resides the flexible-grid-container positioned absolute to stick right under the header. It contains the grid units that are made of normal div elements and just float next to each other. They have their dimensions set by percentage values to resize as the browser window is resized.

And that’s already all we need! Check out a working prototype of the layout here.