Author: Edit Olah

Avoiding using floats

Using inline-block grid and justify instead

Utilising built-in basic behaviour of HTML and CSS can give you a break from the intricate web of using floated elements.

Patrick Kunka says in his article 'Text-align: Justify and RWD' that:

'by default, HTML flows inline and horizontally across the page, left to right, line by line. By using text-align: justify, we are harnessing this characteristic instead of fighting against it with floats and absolute positioning.'

This means that we can build a simple layout without floats, clearfixes and columns that works in IE7+ (some small hacks might be necessary in IE7 if you need to support it).

I used ‘text-align: justify;’ and inline-block elements for my index pages where I wanted to list blog articles or portfolio work detail pages in a grid-style layout. Patrick Kunka’s MIXITUP provided a great base for this.

The basic rules are:

  • The container needs ‘text-align: justify;’ to be applied to it
  • The list elements need to be displayed as ‘inline-block’ elements and their width has to be specified in percentage
  • It is also advisable to set ‘font-size: 0.1px;’ to the container and ‘vertical-align: top;’ to the child elements to control your layout’s whitespace. You might also need to adjust line-height and word-spacing.
  • You need an invisible last element that stretches across the whole width of your container for ‘text-align:justify;’ to work, since, if the content is not enough to fill the whole width of the container, it will just be left aligned. For this, you can use the :after (or in CSS3, the ::after pseudo-element) that inserts a virtual last child of the selected element.
  • When you don’t have a definitive number of list elements, add placeholder elements before the closing container tag in the last row. The number of placeholder elements is equal to: the number of elements in a row minus 2. This will ensure that the grid elements in the last row will align correctly. My example has 3 grid elements in a row, so I need 1 placeholder as the last element.
  • If you have difficulties with the whitespace between your inline-block elements, you might want to consider using zero-width fonts, which will work in all font-face-compatible browsers. You most probably want to apply this to your parent container element. To read more on how to do this visit Patrick Kunka’s 'zero-width font' GitHub repository.

Starting with the HTML:

The CSS:

.grid {
   margin-bottom: 3%;
   text-align: justify;
   font-size: 0.1px;  /* adjusting typographic CSS properties that affect the site layout's whitespace */
}
li {
   display: inline-block;
   vertical-align: top;
   width: 32%;
   padding-top: 3%; /* to harness intrinsic ratio effect */
}
.grid::after {
   content: '';
   display: inline-block;
   width: 100%;
}    
.gap {
   padding: 0;
}

Read more about how I built this website here:
Barefoot in the Park website project – Responsive Web Design

Happy coding!

Resources:

Text-align: Justify and RWD: Patrick Kunka

MIXITUP: KunkaLabs

::after (:after): Mozilla Developer Network

Related blog posts

  • Font sizing

    Font sizing

    px, em, and rem

    Font sizing is a fundamental topic to get your head around when starting...

    More details >>

  • Intrinsic Ratios

    Intrinsic Ratios

    Fluid, dynamic element height with padding-top trick

    One of the main learning points of building this website was that there...

    More details >>

  • Responsive web design

    Responsive web design

    Basic concepts

    I have been working with websites designed to be responsive since I started...

    More details >>

Contact Edit

Get in touch

If you are interested in hiring me, please drop me an email. I would be happy to send you my up-to-date resume.

Drupal Association member
Image of Edit