CSS Layouts

The goal of this article is to introduce to your the concept of CSS layouts and how they are created. The article doesn’t give you detailed information or deal with code snippets. It rather helps you get the big picture and send you in the right direction.

This post is part of a CSS Layout Course that will teach you how to create functional layouts in CSS. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.

Layout is a term used usually when you have more than one column beside one another on an HTML page rendered in a browser viewport. You have no “table” in your HTML markup responsible for that portion of the code. The elements generating the boxes standing beside each other in the viewport are all block-level elements. In this scenario, the term “layout” refers to how, well, the layout of those columns represent your content. For example, you have a section constructed with “main” that contains the main content in your page. You have an “aside” that contains some additional information related to the content in the form of a sidebar beside your “main”. Both “main” and “aside” are block-level elements and so they’re not able to stand beside each other in the width of a viewport as they break their own line as being parsed automatically. But with some trick and magic, you get them to stand beside each other and create a multi-column layout in the browser viewport. That is the kind of situation the term “layout” refers to.

I used the words trick or magic because CSS2.1 doesn’t have any native specialized modules to support multi-column layouts. In CSS3.0 we have the CSS Flexible Box but it cannot be used just yet because not every browser understands it yet. So we have to be happy with the those tricks for now and wait a few years until we can use those new modules. Moreover, not every website is going to change their existing layout technique just because a new module becomes available. If, say after a couple of years from now (date today 1/15/2017), you’re developing a new project from scratch, and if the new CSS3.0 Flexible Box module can be integrated into your existing workflow and tools, you might use it for production, otherwise you might consider using your old workflow and tools. And for existing projects that have already been written, they will not be touched or changed in any way unless they have to.

So let’s learn how we can do layouts with CSS right now without worry about the new CSS3.0 modules.

CSS layouts are mainly created with some techniques that use the CSS properties “position” and “float” along with their possible values. There’s also some instances where you use “display” but that could be thought of as a tool that is responsible for some small sections of layouts like navigation menus and not for the layout itself. The main problem to solve here is to get block-level boxes to live peacefully beside each other in the viewport width as if they were inline elements. That is what we want to learn here.

This post is part of a CSS Layout Course that will teach you how to create functional layouts in CSS. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.