How to make a button stretch across the width of a column

Question

I'm trying to make a button span the width of a column.

e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.

Any ideas?

Answer 1

You will have to make them block elements to be able to set a width:

.button {
    display: block;
    width: 100%;
}

Answer 2

Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.

CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.

There is a limitation, however. You cannot use anything that's like a variable width for inline elements.

Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:

<---width of container--->
Text
<----------button-------->

However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.

If this is what you want; fine and problem solved. If this is not what you want, and instead want:

<---width of container--->
Text <-------button------>

This is not possible. _{CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.}