Lesson 11

Aligning elements

It doesn't have to be linear

By default, browsers display HTML elements left-aligned and one after the other from top to bottom. In this lesson we'll learn how to align elements horizontally on the page.

Inline vs. Block

Block level elements (such as divs, sections, images and paragraphs) force a line-break after themselves, pushing any following content down onto the next line. But what if we want a series of block level elements to sit next to each other like our nav below? By changing the display property of a block level element to inline, we tell it to act like a span, or anchor, or em; it won't force a line break and content will flow along one line. This is a great technique for achieving horizontal navigation bars. We set the list items (li)'s display property to inline, and they line up nicely next to each other.

Floats

But when we change an element to display: inline; it becomes much harder to style. It is much easier to style a block level element (using padding, background images etc) than an inline element. So there's another property in our toolkit; the float. When you float an element to the left or right, other content can flow around it.

We can use this technique to create columns of text, or to flow content around an image or video.

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Remove display: inline; from the list items and see what happens.
  • Swap the columns around by changing the float property and both #column-one and #column-two.
  • Give the image some breathing room by adding margins
Next Lesson
Practical understanding of HTML/CSS layout and positioning using margins, position properties and z-index. Badge

Intermediate Design with CSS

Congratulations! You’ve just earned the Intermediate Design with CSS badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.