Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

CSS Milkshake.


As I've been working with CSS, I've discovered that many elements will accept a width specification easily. Others require an extra bit of trickery & a few elements won't take it at all. It turns out that this is due to the difference between block and inline level elements. Observe the span and div below, where each has the width specified to 200 pixels.

Spans are inline elements.
Divs are block elements.

The important result here is that width can only be specified on block elements, not inline elements. Links are inline elements by default. So if you have a link that you'd like to be a certain width, you must also convert it to a block level element (below).

Super duper really fantastically extra-long.

Unfortunately, if you're working with a horizontal list, I don't believe you can affect the width. The 'display: inline;' declaration on the LIs that makes the list horizontal opposes the 'display: block;' declaration necessary for specifying width.

For those of you who don't like CSS, here is a conversation I had in the car recently:

Me: Is it bad to have a milkshake with breakfast?
Husband: ... Let's look at it in terms of 'healthy' and 'unhealthy'.
Me: Yeah, it is bad. Except if you're Elvis.


Tags: css

Authorized users may log-in to leave a comment.

Last Blog: Superbowl Wrap.

Next Blog: Nintendo - Please Take My Money.