4 Different HTML/CSS Layout Techniques to Create a Site

In this article I want to focus on four different ways you can create multicolumn layouts. Each way has its pros and cons. To demonstrate how these layouts behave and look like, I've created a simple web site that uses HTML tables, CSS float property, CSS framework, and flexbox. As different approaches were used for  different parts of the site, we can say it was sewn from different pieces. That's why I named it a "Frankenstein's site". Spooky...

Why Is This So Important?

Imagine that you want to create your own multicolumn web site. Where should you start from? After googling some, you'll find dozens of tutorials and articles. It's good when there are plenty of possibilities, but it's a little bit hard when you're a novice and don't even know what technique to choose. This article was written to help you with this important decision.

The First Day of Your New Life

It is a good idea to go through the possible ways you can create a multicolumn layout before we go further. We will use four different techniques in this article. Here they are:

• Tables: What's good about them? Using tables for layout creation is intuitive. You can see them almost everywhere! You don't even need to use a separate CSS stylesheet when using tables. And, what is more important, they don't break. Have you ever seen a broken table? No? Me neither. Sounds great. We'll use one of them for our site later.
• Float: We're talking about the CSS property here. It's common practice to use float within your web page to create a layout. And, in this case, you will need to use a separate stylesheet. Two files, huh? Sounds not so convenient comparing to using tables. However, using float is kind of a standard. The only way you'll use your HTML file is to determine the content of your web page. If you want to align your content in some freaky way, you must use the CSS file. Only!
• CSS Frameworks: These work the same way as JavaScript frameworks. Just add the source file to your header (using <link rel="stylesheet" type="text/css" href="stylesheets/framework_file.css">, for example) and it's ready to go! There is no need to write your own properties. Just use the classes that framework developers prepared for you. Sounds great. But how does it work? We'll see.
• Flexbox: Flexbox is a short name for the CSS Flexible Box Layout Module. And this is something new comparing to the float property, for example. The main idea behind the flexbox is to give a container the ability to alter its items' width, height and order. You should use it if you want to fill the available space in the best possible way. For example, to accommodate to all kind of display devices and screen sizes. A flex container will expand its items to fill the screen.

Four techniques is enough for beginners, I guess. And now it's time to taste them.

The Ways of Creation

This is my web site design:

It's some kind of a cinema blog. So, let's start from the header.

Tables

For All The LEGO Fans Out There

Using tables for layout is like playing the LEGO constructor. Create a table. Add blocks of content. Done! I've made my original header mostly using position: relative property. Let's try to make it from scratch using tables. Here's my HTML code:

<table height="230px" background="images/header1.jpg">
    <tr>
        <td colspan="3"></td>
        <td colspan="3" style="font-size: 4em; font-weight: bold" valign="bottom">Cinematron</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td colspan="4" style="font-size: 1.3em; font-weight: bold;" valign="top">All the stuff you need to know about the movies</td>
    </tr>
    <tr>
        <td width="400px"></td>
        <td width="70px"><a href="#">HOME</a></td>
        <td width="120px"><a href="#">PREMIERES</a></td>
        <td width="120px"><a href="#">BOX-OFFICE</a></td>
        <td width="80px"><a href="#">PHOTOS</a></td>
        <td ><input type="search" placeholder="search"></td>
    </tr>
</table>

And this is what I've got:

As you can see, it's not the same header. Yes, it looks familiar, but you can notice that layout changed someway. And I'll tell you why. You know, tables are good when you want to create something symmetric. However, in other cases they are not so handy for making your alignment work well. Notice all that messing with colspan and width. But there is something handy with tables. Here's the trick. Just add something like:

table, td {
    border-collapse: collapse;
    border: 1px solid red;
}

And you'll see how your layout looks like right now:

It might help when you get stuck.
Now the bad news. Look at the HTML code again. It's a dump! My table is simple, but imagine how it will look like with dozens of cells. You can compare it to my original code:

<div id="header">
    <h2>Cinematron</h2>
    <p>All the stuff you need to know about the movies</p>
    <ul id="menu">
        <li>home</li>
        <li>premieres</li>
        <li>box-office</li>
        <li>photos</li>
        <li><input type="search" placeholder="search"></li>
    </ul>
</div>

And the CSS file:

#header {
    height: 230px;
    background-image: url(../images/header1.jpg);
    background-repeat: no-repeat;
    font-family: 'Shift', sans-serif;
}
#header h2 {    
    font-size: 4em;
    position: relative;
    top: 30px;
    left: 550px;
    display: inline;
}
#header p {
    font-size: 1.3em;
    font-weight: bold;
    position: relative;
    top: 50px;
    left: 60px;
    display: inline
}    
#menu {
    position: relative;
    top: 100px;
    left: 340px;
    display: inline-block;
}
#menu li{
    font-weight: bold;
    display: inline;
    text-transform: uppercase;
    margin-right: 14px;
}
#menu input {
    font-size: 0.7em;
    text-transform: lowercase;
    text-align: right;
    position: relative;
    top: -4px;
}

You need to use CSS file in this case, but it's worth it.

When you use something like that:

div {
    position: relative;
    top: 100px;
    left: 100px;
}

You tell your <div> to move 100 pixels down and 100 pixels to the right in relation to its original position. It's easy to move your text around the page with this property. You can move it from one corner to another to decide what position is OK for you. Better than tables. Definitely!

Float

Floating Boats and Solid Rocks. How The Float Property Works

We will use the float property for our main data field. A little example will help us to understand better how it works. Here's a simple HTML file:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
    <body>
        <div id="green"></div>
        <div id="red"></div>
        <div id="blue"></div>
    </body>
</html>

There are three colored <div> elements in it. Green is for main articles, red is for news articles, and blue is for the footer.

And here's the CSS file:

#green {
    width: 200px;
    height: 200px;
    border: 1px solid green;
    float: left;
    margin: 5px;
}
#red {
    width: 100px;
    height: 200px;
    border: 1px solid red;
    margin: 5px;
    float: left;
}
#blue {
    width: 310px;
    height: 100px;
    border: 1px solid blue;
    margin: 5px;
    clear: both;
}

Here's what we've got:

As you can see, it's not so hard to create a simple layout using float. You just tell your <div> that you want it to float using the float property. Then you must give it a proper direction. It's usually float: left or float: right. When you're telling your <div> to float left it will do so until the free space is over. The next floating element will float until it hits the first one, and so on. Just like boats in a river! The elements after the floating one will flow around it, just like water! But if you don't want to turn all your objects into "water", you can use the clear property. The clear property specifies which sides of an element are not allowed for other floating elements to flow around. This will turn your object into a solid rock.

This is how I've made my layout for the main part:

<div id="main-content">
    <div class="article">
        <h2>First article header</h2>
        <img src="images/star_wars.jpg">
        <p>First article body<a href="#">Read more</a></p>
    </div>
    <div class="article">
        <h2>Second article header</h2>
        <img src="images/Interstellar.jpg">
        <p>Second article body<a href="#">Read more</a></p>
    </div>
</div>

<div id="news">
    <div class="news-article">
        <h3>First news article header</h3>
        <p>First news article body</p>
    </div>
    <div class="news-article">
        <h3>Second news article header</h3>
        <p>Second news article body</p>
    </div>
</div>

Now, let's make it float:

#main-content {
    width: 780px;
    float: left;
}
#news {
    margin-left: 20px;
    float: left;
    width: 180px;
}

Add some style to it and you'll get something like this:

We have a big element for the articles and a little one for the news. Some of you could already guess that we’ve used the float: left property for the images too. Notice how they are flowed by the <p></p> tag content. No doubt this layout looks like your favorite magazine.

CSS Frameworks

If You're Feeling Lazy

If you have no time to mess around with your CSS code, you can use one of the CSS frameworks available for you. We'll use Bootstrap for our example. Download it, include it into your HTML file, and use it. I'll show you how.

Bootstrap comes with a grid that is made up of 12 equal-sized columns. HTML elements are arranged to span different numbers of columns in order to create custom layouts. Each piece of content is aligned to this grid by specifying the number of columns to span.

Here's an example:

<div class="row">
    <div class="col-md-6">
        <!--some content-->
    </div>
    <div class="col-md-6">
        <!--some more content-->
    </div>
</div>

In this example we've created a row. Then we've placed two equal-sized columns into it. Each of them spans six of twelve available columns.

We will now create the "Coming soon" section. It will contain four film posters. My math is good enough and I've calculated already that we need to span three columns for each of them.

Here's the HTML code:

<div id="coming-soon">
    <h2>Coming Soon:</h2>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_01.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_02.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_03.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_04.jpg">
            </div>
        </div>
    </div>
</div>

I've also added the thumbnail class to make it prettier. It is a part of Bootstrap too. Here's the result:

Looks good. And you don't even need to change your CSS file. It's really easy to use. However, you don't know what's happening inside of it. If you want to control almost everything you can, you must try the...

Flexbox

Tomorrow's Classics

Flexbox is a big theme and there is no place in this article to describe all the features it has. But the basic properties are also useful.

We will use flexbox to create the "Box-office" part for our web site. Here's the HTML code:

<div id="boxoffice">
    <ul class="flex-container">
        <li class="item first">Cinderella: $67.9M</li>
        <li class="item second">Run All Night: $11.0M</li>
        <li class="item third">Kingsman: The Secret Service: $6.2M</li>
        <li class="item">Focus: $5.7M</li>
        <li class="item">Chappie: $5.7M</li>
        <li class="item">McFarland USA: $3.6M</li>
        <li class="item">The DUFF: $2.9M</li>
        <li class="item">American Sniper: $2.8M</li>
    </ul>
</div>

Here's the CSS for the "boxoffice" container:

#boxoffice {
    width: 780px;
    height: 500px;
    background-image: url(../images/box_office_cropped.jpg);
    background-repeat: cover;
    border-radius: 5px;
    padding: 20px;
}

Now it's time to make a flex container. To do that, we need to set the display property to flex. All the flexbox elements are positioned along the main axis and the cross axis:

There are two types of flexbox properties. The first one is used for manipulating the flex container, and the second one is charged with flex items. Let's consider the first type in detail.

By default, the main axis is horizontal, so the items will flow into a row. To control the main axis, we can use the flex-direction property. Available values are: row, row-reverse, column, and column-reverse. We'll use the column option. Let's also add the height property. You'll see later why we need it.

flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
}

Here's our little chart:

We used the height property, because we don't want our flexbox container to overlap the arrow image at the bottom of our background.

What's more, Flexbox also gives you the opportunity to change the content without changing your HTML file. For example, if you want to turn your items upside down, you can change the flex-direction value to columns-reverse. It will reverse your flexbox and you'll need to reverse the way of how flexbox arranges your items inside of it. We'll use the justify-content property for that purpose. Available values are: flex-start, flex-end, center, space-between, and space-around. You can play with the values later, but now we need to set the justify-content equals to flex-end.

Here's the code:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

Changes are the following:

You can move your items along the cross axis too. For that purpose you can use the align-items property. You can change it to flex-start, flex-end, center, baseline, or stretch.

To use it just add the property to your flexbox selector:

.flex-container {
    align-items: flex-end;
}

And your items will move to the right:

Another good thing about the flexbox is its flex-wrap property. Imagine that your chart is growing rapidly. What will happen if it becomes bigger than your container? Nothing bad if you use the flex-wrap property.

Check this out:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

And this is the result:

As you can see, items are now wrapped into multiple columns. By the way, default value for this property is nowrap and it arranges your items into a single column (or a single row. It depends on the flex-direction value). You can also use the wrap-reverse value. It will reverse your wrapped items.

There are many useful properties flexbox allows you to use. You can change the behavior of every single flexbox item with it. For example, the order property allows you to change the items order without changing the HTML code. Check this guide for more details.

Which one to choose?

Tables. Don't use tables for your page layout! They will bring a mess into your code. They're not so convenient as you may think. And imagine how hard it will be to redesign your site after a couple of months. If you are still asking yourself "Should I use tables for my page layout?", this site may help you.

But they're useful when we're talking about coding email. There are not so many browsers and a huge variety of email agents that people use these days. Desktop, online and mobile applications use different rendering engines. HTML tables look relatively the same across them all. That's why this is the great choice for email design.

Float. Floats are great if you're not asking much. It's a simple way to make your website more attractive. Using float with images is a sign of good taste, as for me. And it's easy to learn! You just need to remember how the float and clear properties work. That's enough for the first steps.

Talking about it's disadvantages, we should admit that floating elements are tied to the document flow, which may harm the flexibility a lot. Use it carefully.

CSS frameworks. If you want to create your layout fast, you can use frameworks. There are many of them available. Just choose.

Flexbox. You'll need to spend some time to learn how they work. But soon after that, you will be invincible! I guess, you’ve realized how convenient they are if you want to manipulate the box items. Spend your weekends with flexbox and you'll love it. I can guarantee it!

But, as I said before, it's something new if you compare it to other CSS features. So, you should remember about the browser support (don't forget to check the "Known issues" section). If your target browser is not supported, don't be upset. You can use Flexie, for example.

And it's not without its bugs. Here's a bug collection I've found. Workarounds included.

Finishing touch. Beautifying the web

As a bonus, I want to show you how you can turn your simple web page into a gorgeous one. You can use CSS code generators for that purpose. For example, EnjoyCSS can help you generate cross-browser CSS with minimum efforts. Gradients, shadows, 2D and 3D effects and more. Just name it! A gallery of samples is available too. Try it now.

Well, that’s enough for today. Hope you liked it. See ya!

About the Author

Lenny Witman is a full-time freelance web developer with 4 years of experience in PHP, Javascript, MySQL, HTML, and CSS. He's passionate about making the web a better place through better code and user experience.