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.

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

.fullwidth {
width:100%;
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
display:block;
text-align:center; /*This will result in centering the link text, which is probably what you want -brianjohnsondesign.com*/
}

.fullwidth {

width:100%;

margin-left:0;

margin-right:0;

padding-left:0;

padding-right:0;

display:block;

text-align:center; /*This will result in centering the link text, which is probably what you want -brianjohnsondesign.com*/

}

And the corresponding HTML:

<a href="#" class="fullwidth">Subscribe now</a>

1	<a href="#" class="fullwidth">Subscribe now</a>

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!