CrocoDillon is correct, block elements take up 100% of the width of their parent container. What you are looking for is display: inline-block. That gives you the same style abilities as display: block, such as adding a height and it margin (inline elements will add these, but they don’t display) but it only takes up as much width as the content inside dictates, one thing it does not do however, is clear itself as display: block does.
border: 1px solid #DDD;
display: inline-block; /* Works in everything but IE7 on down */
padding: 0.5em 1em;
*display: inline; /* IE7 Hack, remove if you don’t care about supporting IE7 */
*zoom: 1; /* IE7 Hack, remove if you don’t care about supporting IE7 */
Now if you don’t want to support IE7, or wish to use conditional CSS files/classes just remove the last two properties in code snippet. If you were wanting your link to clear away from the other content just add clear: both into the snippet and that should do it.
Hope that helps,
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".