Six Studios

Block level elements are easy to work with. You can give them a height and width, and they’ll pretty much look how you intended. Inline elements, such as links and spans, will flow with the document content. They can’t be styled with the height or width CSS attributes.

CSS to the rescue

CSS allows us to control how the element is displayed with the display attribute. A link will display as a block level element because of the following:

1
2
3

a:link, a:visited {
  display: block;
}

inline-block?

There is a hybrid property of display: block and display: inline, it’s display: inline-block. You wont see it used much because Internet Explorer doesn’t fully support it. Firefox and Safari do support the inline-block property properly.

Internet Explorer offers no support for display: inline-block on block level elements (eg: ul, li, div, p, h1-h6, etc). It does, however, provide support with inline elements (eg: img, span, a). Here is an example of display: inline-block used on a paragraph tag and a span. The span works properly in Internet Explorer 6 and 7, Firefox and Safari. The paragraph, on the other hand, still presents itself as a block level element and ignores the display: inline-block styling.

How to use this

Floating HTML elements can get messy really fast and things like this can happen. In most sites I build floating starts in the main navigation and can grow to floating may elements after that. A combination of display: inline and display: inline-block can elevate the need for floating in the main navigation all together. Here is an example of it.

1
2
3
4
5
6

#mainNav li {
  display: inline;
}
#mainNav a:link, #mainNav a:visited {
  display: inline-block;
}

Happy coding!