How can I make a link inside a div fill the entire space inside the div?

Question

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

Answer 1

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;
}

Answer 2

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.

Answer 3

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: Fiddle

Answer 4

You can use the bootstrap class="stretched-link" in your a element and it will expand to your div.

Answer 5

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

Answer 6

You need to make the link a block level element.

.link_class {
    display: block;
}