Archive for February, 2010




New Love for Inline Block

Author: TheHahn
February 10, 2010

Inline-block is spectacular.

Check out this menu.

<div>
<p>
<a>Home</a>
<a>Products</a>
<a>Services</a>
<a>About Us</a>
<a>Contact Us</a>
<span></span>
</p>
</div>

CSS:
p { width:776px; text-align:justify; }

p a { height:18px; padding:10px 20px; display:inline-block; }

p a span { display:inline-block; width:50%; }

Now I get a menu that spans the container with automatic spacing. With justified text the last line is not stretched. To force the single line to expand I added an element that is well beyond enough width to force a carriage return. Note that inline block only works in IE if the element is inline by default. In FF 2.0 inline-block is not supported, but can be cheated like so:
display: -moz-inline-block;
display: inline-block;

So… good luck!