In this article by Piotr Sikora, author of the book Professional CSS3, you will master box model, floating's troubleshooting positioning and display types. Readers, after this article, will be more aware of the foundation of HTML and CSS.

In this article, we shall cover the following topics:

• Get knowledge about the traditional box model
• Basics of floating elements
• The foundation of positioning elements on webpage
• Get knowledge about display types

(For more resources related to this topic, see here.)

Traditional box model

Understanding box model is the foundation in CSS theories. You have to know the impact of width, height, margin, and borders on the size of the box and how can you manage it to match the element on a website. Main questions for coders and frontend developers on interviews are based on box model theories. Let's begin this important lesson, which will be the foundation for every subject.

Padding/margin/border/width/height

The ingredients of final width and height of the box are:

• Width
• Height
• Margins
• Paddings
• Borders

For a better understanding of box model, here is the image from Chrome inspector:

For a clear and better understanding of box model, let's analyze the image:

On the image, you can see that, in the box model, we have four edges:

• Content edge
• Padding edge
• Border edge
• Margin edge

The width and height of the box are based on:

• Width/height of content
• Padding
• Border
• Margin

The width and height of the content in box with default box-sizing is controlled by properties:

• Min-width
• Max-width
• Width
• Min-height
• Max-height
• Height

An important thing about box model is how background properties will behave. Background will be included in the content section and in the padding section (to padding edge).

Let's get a code and try to point all the elements of the box model.

HTML:

<div class="element">

  Lorem ipsum dolor sit amet consecteur

</div>

CSS:

.element {

   background: pink;

   padding: 10px;

   margin: 20px;

  width: 100px;

  height: 100px;

   border: solid 10px black;

}

In the browser, we will see the following:

This is the view from the inspector of Google Chrome:

Let's check how the areas of box model are placed in this specific example:

The basic task for interviewed Front End Developer is—the box/element is described with the styles:

.box {

    width: 100px;

    height: 200px;

    border: 10px solid #000;

    margin: 20px;

    padding: 30px;

}

Please count the final width and height (the real space that is needed for this element) of this element.

So, as you can see, the problem is to count the width and height of the box.

Ingridients of width:

• Width
• Border left
• Border right
• Padding left
• Padding right

Additionally, for the width of the space taken by the box:

• Margin left
• Margin right

Ingridients of height:

• Height
• Border top
• Border bottom
• Padding top
• Padding bottom

Additionally, for height of the space taken by the box:

• Margin top
• Margin bottom

So, when you will sum the element, you will have an equation:

Width:

Box width = width + borderLeft + borderRight + paddingLeft + paddingRight

Box width = 100px + 10px + 10px + 30px + 30px = 180px

Space width:

width = width + borderLeft + borderRight + paddingLeft + paddingRight +  marginLeft + marginRight

width = 100px + 10px + 10px + 30px + 30px + 20px + 20 px = 220px

Height:

Box height = height + borderTop + borderBottom + paddingTop + paddingBottom

Box height  = 200px + 10px + 10px + 30px + 30px = 280px

Space height:

Space height = height + borderTop + borderBottom + paddingTop + paddingBottom +  marginTop + marginBottom

Space height = 200px + 10px + 10px + 30px + 30px + 20px + 20px = 320px

Here, you can check it in a real browser:

Omiting problems with traditional box model (box sizing)

The basic theory of box model is pretty hard to learn. You need to remember about all the elements of width/height, even if you set the width and height. The hardest for beginners is the understanding of padding, which shouldn't be counted as a component of width and height. It should be inside the box, and it should impact on these values. To change this behavior to support CSS3 since Internet Explorer 8, box sizing comes to picture.

You can set the value:

box-sizing: border-box

What it gives to you? Finally, the counting of box width and height will be easier because box padding and border is inside the box. So, if we are taking our previous class:

.box {

    width: 100px;

    height: 200px;

    border: 10px solid #000;

    margin: 20px;

    padding: 30px;

}

We can count the width and height easily:

Width = 100px

Height = 200px

Additionally, the space taken by the box:

• Space width = 140 px (because of the 20 px margin on both sides: left and right)
• Space height = 240 px (because of the 20 px margin on both sides: top and bottom)

Here is a sample from Chrome:

So, if you don't want to repeat all the problems of a traditional box model, you should use it globally for all the elements. Of course, it's not recommended in projects that you are getting in some old project, for example, from new client that needs some small changes:

 * {

width: 100px;

}

Adding the preceding code can make more harm than good because of the inheritance of this property for all the elements, which are now based on a traditional box model. But for all the new projects, you should use it.

Floating elements

Floating boxes are the most used in modern layouts. The theory of floating boxes was still used especially in grid systems and inline lists in CSS frameworks. For example, class and mixin inline-list (in Zurb Foundation framework) are based on floats.

Possibilities of floating elements

Element can be floated to the left and right. Of course, there is a method that is resetting floats too. The possible values are:

float: left; // will float element to left

float: right; // will float element to right

float: none; // will reset float

Most known floating problems

When you are using floating elements, you can have some issues. Most known problems with floated elements are:

• Too big elements (because of width, margin left/right, padding left/right, and badly counted width, which is based on box model)
• Not cleared floats

All of these problems provide a specific effect, which you can easily recognize and then fix.

Too big elements can be recognized when elements are not in one line and it should. What you should check first is if the box-sizing: border-box is applied. Then, check the width, padding, and margin.

Not cleared floats you can easily recognize when to floating structure some elements from next container are floated. It means that you have no clearfix in your floating container.

Define clearfix/class/mixin

When I was starting developing HTML and CSS code, there was a method to clear the floats with classes .cb or .clear, both defined as:

.clearboth, .cb {

    clear: both

}

This element was added in the container right after all the floated elements. This is important to remember about clearing the floats because the container which contains floating elements won't inherit the height of highest floating element (will have a height equal 0). For example:

<div class="container">

    <div class="float">

        … content ...

    </div>

    <div class="float">

        … content ...

    </div>

    <div class="clearboth"></div>

</div>

Where CSS looks like this:

.float {

    width: 100px;

    height: 100px;

    float: left;

}

 

.clearboth {

    clear: both

}

Nowadays, there is a better and faster way to clear floats. You can do this with clearfix, which can be defined like this:

.clearfix:after {

    content: " ";

    visibility: hidden;

    display: block;

    height: 0;

    clear: both;

}

You can use in HTML code:

<div class="container clearfix">

    <div class="float">

        … content ...

    </div>

    <div class="float">

        … content ...

    </div>

</div>

The main reason to switch on clearfix is that you save one tag (with clears both classes). Recommended usage is based on the clearfix mixin, which you can define like this in SASS:

=clearfix

  &:after

    content: " "

    visibility: hidden

    display: block

    height: 0

    clear: both

So, every time you need to clear floating in some container, you need to invoke it. Let's take the previous code as an example:

<div class="container">

    <div class="float">

        … content ...

    </div>

    <div class="float">

        … content ...

    </div>

</div>

A container can be described as:

.container

  +clearfix

Example of using floating elements

The most known usage of float elements is grids. Grid is mainly used to structure the data displayed on a webpage. In this article, let's check just a short draft of grid.

Let's create an HTML code:

<div class="row">

    <div class="column_1of2">

        Lorem

    </div>

    <div class="column_1of2">

        Lorem

    </div>

 

</div>

<div class="row">

    <div class="column_1of3">

        Lorem

    </div>

    <div class="column_1of3">

        Lorem

    </div>

    <div class="column_1of3">

        Lorem

    </div>

 

</div>

 

<div class="row">

    <div class="column_1of4">

        Lorem

    </div>

    <div class="column_1of4">

        Lorem

    </div>

    <div class="column_1of4">

        Lorem

    </div>

    <div class="column_1of4">

        Lorem

    </div>

</div>

And SASS:

*

  box-sizing: border-box

=clearfix

  &:after

    content: " "

    visibility: hidden

    display: block

    height: 0

    clear: both

.row

  +clearfix

.column_1of2

  background: orange

  width: 50%

  float: left

  &:nth-child(2n)

    background: red

.column_1of3

  background: orange

  width: (100% / 3)

  float: left

  &:nth-child(2n)

    background: red

.column_1of4

  background: orange

  width: 25%

  float: left

  &:nth-child(2n)

    background: red

The final effect:

As you can see, we have created a structure of a basic grid. In places where HTML code is placed, Lorem here is a full lorem ipsum to illustrate the grid system.

Summary

In this article, we studied about the traditional box model and floating elements in detail.

Resources for Article:

Further resources on this subject:

• Flexbox in CSS [article]
• CodeIgniter Email and HTML Table [article]
• Developing Wiki Seek Widget Using Javascript [article]