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 Box Model – border-box versus content-box

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 property box-sizing can have four different values:

  • content-box
  • border-box
  • initial
  • inherit

initial and inherit apply to almost all (or I think all) CSS properties and are not important here, so we don’t talk about them.

content-box

When you set the value of the box-sizing property of an element to content-box, the width property defined for that element determines the width of the content area only, not including padding, border or margin.

For example, let say you had the following code,

div#id1 {
box-sizing: content-box; 
width: 150px; 
padding: 20px; 
border: 1px solid black; 
margin: 20px; 
}

This situation for div#1 would mean that the total width of div#id1 is the sum of,

  • 150px content area width
  • padding-left width of 20px
  • padding-right width of 20px
  • border-left width of 1px
  • border-right width of 1px
  • margin-left width of 20px
  • margin-right width of 20px

That would in total come to,

150 + 20 + 20 + 1 + 1 + 20 + 20 = 232px

So you can easily calculate how much viewport width you need for div#id1. You can calculate it.

Note: The Firefox Firebug add-on does not take margin left or right into consideration when it’s reporting elements’ widths. But when you are doing layouts, you definitely need to take that into consideration as well since margin-left and margin-right of boxes take space in the viewport.

border-box

If, on the other hand, you set the box-sizing value of a box to border-box, the value of a width property given to that element would refer to the width of the content area, border-left and border-right and padding-left  and padding-right of that element altogether. Let’s look at the following example,

For example, if you had the following,

div#id1 {
box-sizing: border-box; 
width: 20%; 
padding: 20px; 
border: 1px solid black; 
}

This situation for div#id1 would mean that the total width of div#id1 is just 20% of the parent element. padding-left (20px), padding-right (20px), border-left (1px) and border-right (1px) are going to be subtracted automatically by the browser from the 20%, no matter what value the 20% in pixel happens to be based on the width of the parent element. For example, if in this case, the width of the parent element of div#id1 is 1080px, then the width of div#id1 is going to be 1080 * 20% = 216px. The content area of div#id1 is going to have a width of 216px – 20px (padding-left) – 20px (padding-right) – 1px (border-left) – 1px (border-right) = 174px.

Please note that I have written no margin in the code snippet above. Also, I have written the values for width and padding in different units, width in % and padding in px. It comes in handy if you’re able to use mixed units when you’re dealing with CSS layouts for example with float or also using other techniques.

Box-Sizing CSS Property Practical Application

box-sizing: border-box; is useful in situations where you want/have to enter the values for width, padding and border of your HTML elements in different mixed units. For example, you enter the width in % and padding and border in px. If you are developing a layout and have identified the width of some section of your layout in % and the width of padding related to that section in px, then there’s no way for you to calculate the total width of the section anymore if the box-sizing property of that layout section is set to content-box. In that case the total width would be “20% + padding-left-width + padding-right-width”. 20% is not a fixed value and changes based on the width of the parent element the layout section lives in.

In such cases, you set the box-sizing property of the layout section to border-box. Having the same example in mind, the total width of the the whole layout section would become 20% of the parent element the layout section lives in. The other element next to the layout section in the layout could have a width of 80% and you’re done.

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.

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.