Search code examples
htmlcssanchorhrefclickable

Div Anchor Clickable Even Outside of Div

I have a very simple question. Whenever I surround a div with a pair of anchor tags, the div becomes clickable, but for some reason the clickable part extends past the dimensions of the div itself and goes across the page. How do I make the div clickable within it's boundaries and not stretched across the page? I have included my code here.

HTML

<!DOCTYPE html>

<html>
<head>
<title>My Webpage</title>
<link rel = "stylesheet" href = "mystyles.css" type = "text/css">
</head>
<body>
<div id = "link"></div>
</body>
</html>

And the CSS

#link {
background-color: #00ccee;
border: solid black 2px;
border-radius: 25px;
width: 150px;
height: 50px;
transition: 1s;
}

#link:hover{
background-color: blue;
width: 160px;
height: 60px;
margin-left: 30px;
}
Solution

  • Codepen http://codepen.io/noobskie/pen/bVVdaP

    all you have to do is put a link inside the div and add this to your css on the a

    a{
  display:inline-block;
  width:100%;
  height:100%;
}

    This will make sure the link expands fully inside the divs width+height.

    If you want the link to be outside of your div my suggesgion would be to make it a fixed width then you can just adjust that to the size of your div(percentages for responsive)

    Heres a little info on wrapping a tags around divs

    Is putting a div inside an anchor ever correct?

    Depending on the version of HTML you're catering to:

    • [HTML 4.01][1] specifies that <a> elements may only contain [inline elements][3]. A <div> is a [block element][2], so it may not appear inside an <a>.

      Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

      However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.

    • [HTML 5][4] states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

      [1]: http://www.w3.org/TR/html401/struct/links.html#edef-A [2]: http://www.w3.org/TR/html401/sgml/dtd.html#block [3]: http://www.w3.org/TR/html401/sgml/dtd.html#inline [4]: http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element