Menu
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%; } 
624
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
You can fill a whole div or other parent element container in HTML with a link tag inside the div using some positioning attributes in CSS. The link tag is absolutely positioned to its parent which is relatively positioned, and will now fill the whole parent tag.
simple answer is no, you can use onclick with css cursor:pointer to get the same functionality, though. Show activity on this post. Per the HTML spec (HTML 4.01, Draft 5 and XHTML 1,1.1) an anchor tag <a> cannot enclose a <div> tag. Since this answer was posted, HTML5 has come out.
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%; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
