How can I make a link inside a div fill the entire space inside the div?
CssCss Problem Overview
I have a div
that has a set width and it is wrapped around a link. I want the link inside to fill the entire space of the div
so that when I click anywhere inside the div
(which I have styled to look like a button) it goes to the link. This is what I have tried, but .link_class
doesn't do what I want. Any suggestions?
HTML:
<div class="button_class">
<a class="link_class" href="http://www.my_link.com>My Link</a>
</div>
CSS:
.button_class {
width:150px;
padding:5px 7px;
color:#fff;
text-align:center;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.link_class {
width:100%;
height:100%;
}
Css Solutions
Solution 1 - Css
This should do the trick:-
By default a
is an inline element and width does not affect them. So change it to inline-block to have it take the width you specify.
.link_class {
display:inline-block;
width:100%;
height:100%;
}
##Fiddle
Solution 2 - Css
Here is the Solution.
The HTML:
<div class="button_class">
<a class="link_class" href="http://www.my_link.com">My Link</a>
</div>
The CSS:
.button_class {
width:150px;
color:#fff;
text-align:center;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:blue;
}
.link_class {
display:block;
color:#ffffff;
overflow:auto;
padding:5px 7px;
}
Hope this helps.
Solution 3 - Css
I know this is an old question, but HTML5 has a better way to do this.
The answer today is:
HTML:
<a class="link_class" href="http://www.my_link.com>
<div class="button_class">My Link</div>
</a>
CSS stays the same, except you don't need .link_class anymore.
Solution 4 - Css
This worked. The key was to explicitly set the div
height and then use line-height
on the link.
.button_class {
width:150px;
height:30px;
color:#fff;
text-align:center;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.link_class {
display:inline-block;
width:100%;
line-height:30px;
}
Solution 5 - Css
You need to make the link a block level element.
.link_class {
display: block;
}
Solution 6 - Css
Why use outer div in first place? Write all your code for the link and show your link as a button. That will simplify your problem.
.link_class{width:150px;height:30px;color:#fff;text-align:center;display: block;
-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
/*some other styles*/}
Check this demo: http://jsfiddle.net/abhijeetchindhe/TvtRv/7/">Fiddle</a>
Solution 7 - Css
.button_class {
display:flex;
}
.link_class {
flex-grow: 1;
text-align: center;
}
Solution 8 - Css
You can use the bootstrap class="stretched-link"
in your a element and it will expand to your div.