Coding for designers part 8

Now it’s time to start using the CSS knowledge we have built up to create some layouts.

Using some example html, a nav element containing a list of links and a div containing a header and a few paragraphs, I’ll attempt to walk you through five different techniques to create a simple two column layout.

Why five different ways to do the same thing? Well CSS layout is more of an art than a science and there are often many ways to achieve the same end result. Not every technique is right for every situation and each have their pros and cons. Don’t worry, with a little bit of practice you get a feel for which technique suites the job at hand.

Before we get started

See the Pen No Layout example by chris-creditdesign (@chris-creditdesign) on CodePen.

This is our basic page with no layout applied. I’ve taken the liberty of adding some base styles and colouring the nav red and the div blue. Each of the following examples will use this as the starting point.

Layout with margins

One of the simplest ways to achieve two a column layout is to use margins.

First we’ll set our nav to position: absolute; and give it a width of 25% to create a quarter width column.

nav {
  width: 25%;
  position: absolute;
}

Setting the nav’s position to absolute removes it from the flow of the document so the blue div moves up behind the red nav and is obscured. Not a problem. If we now set a margin-left of 27% the div will be squashed to the right to create a second three quarter width column. The first 25% is to move it from behind the nav and the extra 2% is to give a bit of white space, or gutter as we InDesign folk like to say. Nice.

.container {
  margin-left: 27%;
}

See the Pen Layout with margins example by chris-creditdesign (@chris-creditdesign) on CodePen.

Layout with floats

Floats were invented to help web designers recreate the text wrap effect that print designers have had at their disposal for centuries. Click on the button in the example below to turn the floats on and off for the images to see the effect this has.

See the Pen Float example by chris-creditdesign (@chris-creditdesign) on CodePen.

The first image is set to float: left; so that it sits on the left hand side and the text wraps around it to the right. The second image is set to float: right; so that it sits on the right.

But it’s not only images within text that can be floated. All elements can in fact be floated and multiple elements can be floated next to each other. We can use this handy trick to create layouts.

In the example below I’ve created a basic layout using floats. The four pink boxes are floated left so they stack up next to each other to create columns. Note that he bottom orange box that follows must then be set to clear: left; so that it moves down past the floated elements and is not obscured. Once again click on the buttons to see the effect of turning off the float and clear properties.

See the Pen Floating elements example by chris-creditdesign (@chris-creditdesign) on CodePen.

Back to our case study. Hopefully you’re one step ahead of me and are thinking about floating our nav and div next to each other to recreate the column layout. Top marks!

nav {
  float: left;
  width: 25%;
}

.container {
  float: left;
  width: 70%;
  margin-left: 2%;
}

If we give the nav a width of 25%, the div to a width of 75% and float them both left we can recreate the column layout. Adding a margin-left of 2% to the div will add the gutter.

See the Pen Layout with floats example by chris-creditdesign (@chris-creditdesign) on CodePen.

Next up we’ll step away from the two column layout for a minute to look at creating another popular layout. The fixed navigation bar.

nav {
  width: 100%;
  position: fixed;
  top: 0;
}

By setting the nav’s position to fixed and setting the top property to zero we can ensure that it will remain glued to the top of the screen. Then setting its width to 100% will make it stretch across the whole screen.

By default the body will have some margin applied which will result in white space around the edges. To ensure our nav touches the sides of the screen we can revert the body margin to zero.

body {
  margin: 0;
}

Next up we can set the list items that contain our navigation links to display inline so that they will sit in a row rather than stacking on top of each other.

li {
  display: inline;
}

There just remains one tiny problem. Because we removed the nav from the flow of the document when we set its position to fixed the div has moved up into the empty space and now the headline is being obscured. We can fix that by giving it some margin-top to push it down below the nav bar.

.container {
  margin-top: 50px;
}

Et voilà!

See the Pen Layout with fixed nav example by chris-creditdesign (@chris-creditdesign) on CodePen.

Layout using inline-block

Another neat but perhaps less well know layout technique is to use the display type inline-block. This is a close relative to inline in that it allows elements to line up ‘inline’ but they can also retain some block like properties, such as being able to set a width and height.

nav {
  display: inline-block;
  width: 25%;
  vertical-align: top;
}

.container {
  display: inline-block;
  width: 70%;
  vertical-algin: top;
}

Once we have declared inline-block as a display type the nav and the div will be in effect treated as if they are text. As such they will both be sitting on the baseline, causing the nav to shoot to the bottom of the page. To fix this we can set them both to vertical-algin: top; unless of course that is the look you are going for.

See the Pen Inline-block layout example by chris-creditdesign (@chris-creditdesign) on CodePen.

Layout using flexbox

Now for the new kid on the block. Flexbox is a brand new layout module and is perhaps unique amongst the techniques listed here in that it was created specifically to make complex layouts easier to achieve. Being so new it only work in the latest browsers and will require vendor prefixes for some. But don’t let that put you off.

Flexbox allows you to create a flexible box in which to place content that then becomes very easy to stretch and squash to fit. To get us started I’ll place our trusty nav and div inside a section tag with the class of flexbox. I’ll then set this div to be our flex container.

.flexbox {
  display: flex;
}

Then by setting a width for the nav and div we can instantly create a column layout.

nav {
	width: 25%;
}

.container {
	width: 60%;
}

Great but not so exciting you say? Well the real power of flexbox is in the ease with which me can adjust this layout with the additional properties provided.

justify-content Allows us to horizontally align or distribute the contents.
flex-direction Gives us the option to reverse the order.
align-items Handles vertical alignment and even allows us to align the top baselines of each block of text, something that was almost impossible to do before.

Go ahead and have a play with the options below to see how these properties come into play.

See the Pen Flexbox layout example by chris-creditdesign (@chris-creditdesign) on CodePen.

This demo is just a taster of the many other flexbox options.

In the near future true CSS grid layout will revolutionise the way we layout content on the web. But for the time being one or a combination of the examples above will be your best bet.

Next time around we’ll take our first steps into the world of JavaScript!