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:

Tired of dealing with your slow WordPress website? Email me at brian@pagecrafter.com and mention the code #FreeHosting10 for two free months of lightning-fast WordPress hosting. We will even migrate you for free!

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.