How to Force a Button or Link to be 100% Width CSS Tutorial

These are instructions on how to make an HTML link or button expand to be as wide as its parent element. Maybe you have been confused in the past and that darn link just never wants to grow.A button that is 100% Width

Here is the CSS you are going to want to apply to that link.

And the corresponding HTML:

The secret here is that you need to use display:block; to actually force the button to grow to the full width. You also can’t really use left or right margins or padding, as they will just mess up the width and cause it to be off-center or larger than its container. Top or bottom margins or padding won’t cause any problems, however.

Keep in mind, as well, you need to make sure that the parent div or element of the link must be the width you are trying to force this button to be. Check and make sure it has a width!

About Brian Johnson

Brian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

12 Comments on “How to Force a Button or Link to be 100% Width CSS Tutorial”

  1. This doesn’t work if you want a margin on the side of your button. I found that you can work around this by using:

    width: calc(100% – 6em);

    where you set your subtraction distance (as in 6em above) along with your margins to give the appropriate appearance that you want.

  2. Pingback: [RESOLVED]linkbutton width | Asp Forum

Leave a Reply

Your email address will not be published. Required fields are marked *