Display:block Creating 100% Width?

[siouxfan45]

The edit link [on the top of my pages](http://themeforward.com/demo2/2013/03/08/image-gallery/ “http://themeforward.com/demo2/2013/03/08/image-gallery/”) is using the CSS below. However, the CSS is causing the link to fit the width of the div – why may this be?

My CSS:

.post-edit-link { border:1px solid #DDD; padding:.5em 1em; background:#FAFAFA; clear:both; display:block }

[CrocoDillon]

That’s what blocks do. You can change it though by setting the width.

I can’t see the edit thing by the way.

[Senff]

I don’t see any EDIT link on that page (likely because I’m not logged in to your system) so can’t really see what the problem is.

[ElijahFowler]

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.

Try this:

.post-edit-link {
background: #FAFAFA;
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,

-Elijah

[Author]

Posts