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

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> <a href=" 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%; } 

8 Answers

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

Here is the Solution.

The HTML:

<div> <a href="">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.

I know this is an old question, but HTML5 has a better way to do this.

The answer today is:

HTML:

<a href=" <div>My Link</div> </a> 

CSS stays the same, except you don't need .link_class anymore.

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

You need to make the link a block level element.

.link_class { display: block; } 

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

.button_class { display:flex; } .link_class { flex-grow: 1; text-align: center; } 

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