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:

Manipulate Normal Document Flow to Create CSS Layouts – Float Technique

The goal of this article is to introduce to the concept of “normal document flow” in a browser and how you can manipulate it.

This post is part of a CSS Layout Course that will teach you how to create a functional layouts in CSS using the float technique. 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.

When you are writing an HTML document, you’re positioning the boxes or elements probably without knowing it. You basically do this in two different ways:

  • You choose some sort of order in order to put your HTML tags in your HTML documents for example, in header, you usually first write an h1 element to denote the main theme of the whole website and then write a p element to give the reader some information about the contents of the h1 tag. Well, you might do this in different ways depending on the nature and purpose of the project but you almost never write the p element first. That almost never happens. So the order that you choose is going to determine in what order you’re going to have the two elements appear in the browser window.
  • Every html element that you write in an HTML document takes some sort of default value in your CSS automatically if you don’t change the default value. For example every HTML element has a CSS property called “position”. The value of the position property is by default always set to “static” for all the elements on the page unless you change them. position: static; basically means that all elements are going to appear in the document in the browser in some sort of natural flow and flow throughout the whole page. So if you don’t change the default value of the CSS property position, you are actually setting it to “static”, which means you have chosen the normal document flow. The document flow is basically the state when the browser is going to take care of everything for you, position-wise. If you manipulate the document flow, you’ll be responsible to make sure everything on the page is going to be positioned properly so that your content is accessible to the reader.

So now, you know about the normal document flow. Our goal here is to manipulate the normal document flow in a safe way, that is, in such a way that you position everything you need everywhere you wish to, without disturbing other elements. for this purpose you can use other values of the CSS Property position. We said that the default value is “static”. The other possible values are “absolute, fixed, relative, initial and inherit”. initial and inherit are not values specific to the CSS “position” property. They can be set in case of almost all the CSS properties. So we’re not going to talk about them here. “absolute, fixed and relative” are the values that we need to understand in order to be able to manipulate the normal document flow in the browser window.

There’s one more way to manipulate the normal document flow and that is using the CSS “float” property. float is a very special case and behaves in strange ways. float was originally supposed to be used for floating text around an image on your website but web designers used it to create CSS layouts mainly because CSS didn’t have any tools to create layouts back around 10 years ago. We are still using float to create layouts (in some cases – there are other tools as well) although CSS3 has introduced the CSS property “flex” but not all browsers understand flex yet. Moreover, it’s going to take some time for developers to change the way they do layouts. Everyone is using techniques like using float to create layouts now.

This post is part of a CSS Layout Course that will teach you how to create a functional layouts in CSS using the float technique. 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.