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.
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