i

Learn HTML and CSS in 10 Days

Positioning With Inline-Block

Till now, we have come to know that by using floats, we can place the content to wherever we want. The second way to do it is by the 'display' property with the inline-block value.

Inline-Block in Practice

Let’s take the example of our 3 column layout as we have done before. The HTML for that will be as:

Instead of floating those three sections, we are going to keep their display value as inline-block, leaving the 'width' and 'margin' property as before. Our CSS will be like:

section {

  display: inline-block;

  margin: 0 1.5%;

  width: 30%;

}

Sad to say, but this code alone is not able to perform the desired task, and you will notice that the last ‘section’ will get placed in a new row. To display all 3  elements on the same row it is important to remove white space between each  element.