FTOB: Set height and width for anchors with display:block

admin — Sat, 25 Apr 2009 22:14:27 +0000

Originally posted on 10/25/08 at http://likesalmon.wordpress.com

Turns out the width and height properties only work on anchor tags when used in conjunction with display:block. WTF?

So this does not work:
a { width: 100px; height: 100px; }

But this does:
a { width: 100px; height: 100px; display:block; }

Again, have I seriously never run into this before? Do I always just give up and work around this problem? Denial ain’t just a river in Egypt.

FTOB: CSS width property does exactly what you would expect it to

admin — Sat, 25 Apr 2009 22:13:32 +0000

Originally posted on 10/19/08 at http://likesalmon.wordpress.com

The other day I was laying out a wordpress driven site in css and realized that I didn’t actually understand how the “width” property works. This was extremely embarrassing to admit to myself, because it means I’ve been flubbing and cheating my way through the layout of every website I’ve developed so far. Its one the things that fell through the cracks because of limited time or lack of will. So I did a little testing and it turns out the width property works in the most obvious way possible, with one exception. Here are the results of my test:

All of the following boxes are div elements set to width: 200px; height: 200px and background-color: #ccc. I use lots of shorthand, so you’ll want to review that or this won’t make much sense. I performed this test in Firefox 3 so I trust that this behavior is the standard.

The following code was removed because it was breaking my layout — ed.

This is the basic box. No other styling has been added. If you add more text to the box than the box can hold, it will flow outside the box, but the box will remain the same size. To cut the text off at the edges of the box use “overflow: hidden”.

The border property of this box is set to border: 10x;. Notice how the inner box is still 200px by 200px. The border has been added to the outside. The total dimensions of the div are now 220px by 220px.

The margin of this box is set to margin: 40px. The space it now takes up is 280px by 280px. Margins appear to behave exactly like borders, except they are always transparent.

The padding of this box is set to padding: 10px;. Notice how this expanded the box 10px on each side, for a total height and width change of 20px. This is the one unexpected behavior I encountered: I figured it would constrain the contents of the box instead of expanding the box itself.

This box is like the last one, with padding: 10px;. The difference is that this one is nested inside a div with width: 200px; height: 200px;. Unless the overflow: hidden; property is set, this makes no difference at all. The box still expands to 220px by 220px and overflows the container div.

This box is contained within a div that is 100px smaller than it is. This only makes a difference if you use “overflow: hidden”, which will cut off the edges of the box where the container div ends. Keep in mind that the next element on the page will butt up against the parent div and will be overlapped by the over-sized box contained therein. I had to adjust the margin of the

element that follows this div so they don’t overlap.

In conclusion, if you’re designing a site that is 800px wide with an 8px border, you would subtract the width of the border from the width of the container element like so: #container { width: 792px; border: 8px solid #ccc; }. The #container element stays at 800px and everyone is happy.

Too good

admin — Sat, 15 Nov 2008 02:50:49 +0000

This was posted two days ago on Subtraction. Just about everything on Subtraction is worth checking out, but I found this particularly apt right now:

Give up and use tables

Likesalmon Design » CSS

FTOB: Set height and width for anchors with display:block

FTOB: CSS width property does exactly what you would expect it to

Too good