CODEWITHSUNDEEP
csshtmlbutton
dnh37
dnh37

Reputation: 473

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

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?

Upvotes: 7

Views: 54265

Answers (3)

jeroen
jeroen

Reputation: 91762

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

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

Upvotes: 26

Pindatjuh
Pindatjuh

Reputation: 10526

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.

Upvotes: 1

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.

Upvotes: 0

Related Questions