Condolent Condolent - 2 months ago 11
CSS Question

Make a link background as wide as the container

How can I make a link's background as wide as the container it's inside?

My current code:

.menu {
width: 500px;
height: 100%;
background-color: gray;
left: 0;
top: 0;
position: fixed;

.menu_content {
top: 50px;
position: relative;
width: 100%;

a.menuBtn, a.menuBtn:visited {
background-color: blue;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 500px;
text-decoration: none;
color: white;

<div class="menu">
<div class="menu_content">
<a href="#" class="menuBtn">Start</a>


I want it to, no matter how long the link-text is, have the blue background as wide as the gray background. And the link-text to be 20px in from the left.

Currently the blue background gets wider if the text is longer, due to the padding. Tried a padding-right: 100% but obviously that didn't work. Worth a shot though


a.menuBtn{ display: block; }

And remove the padding-right:500px