CSS “display” Property

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

The CSS display property is most often used for building CSS layouts or in cases where you are trying to position HTML elements. It’s so because it changes the way an element is represented on the view port, whether it’s going to be rendered as a block-level box, inline box, inline-block box, etc.

For example the HTML “li” tag creates a block-level box in the view port. So when you have a “ul” and some li’s inside it, you’ll have some li’s on top of one another in the view port, each taking up the whole view port width, the next one starting from the next line. That’s basically how block-level boxes behave. This is not helpful if you’re building a horizontal navigation menu with a “ul”. You’d want the li’s to be placed beside each other. You know that inline boxes do exactly the same thing. In the viewport, they take up exactly as much space as their content needs. And that is exactly what you’d need in this situation. So you simply write in your CSS,

ul li { display: inline; }

And the problem is taken care of.

The “display” CSS property takes the following values. Please note that I have omitted the values that are not so often used or not relevant to our discussion here:

  • inline
  • block
  • inline-block

There’s one more interesting value for the “display” property which is “none”. You use this value mostly when you want to get the browser not show the element. In some cases and techniques it’s very useful.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

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.