Archive for February, 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!




