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.
|
1 2 3 4 5 6 7 8 9 |
.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:
|
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!
11 Comments on “How to Force a Button or Link to be 100% Width CSS Tutorial”
Thanks
Thanks
Seems to just be centering my Button, any ideas?
Have you verified that the parent element above your button is any wider?
Thank you , usefull css tip
Glad I could help!
brilliant
Thanks for this!
Thanks for that!
Pingback: [RESOLVED]linkbutton width | Asp Forum
Great tip, Just what I needed to make my clients sites CSS Links / Buttons look right for my design.