Why does my hyperlinked div stretch across the entire page? - html

Question

This div is inside a 'page-container' div with a 'content div inside it, but the issue can be reproduced without those (as seen in the Fiddle below).
HTML:
<div class="download_link">Download PDF</div>
CSS:
.download_link {
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
.download_link:hover {
transition: 0.5s;
background-color: limegreen;
}
The div links properly and even changes color on hover. But the link stretches across the entire container. I have tried changing the width of all sorts of things.
>>> Convenient JSFiddle <<<

Answer 1

Generic division (div), by default, is a block element. Blocks, regardless of their width, take an entire line to themselves within their parent. In your case, the parent of the div is an anchor tag, which, by default, is inline. Inlines, likes absolute elements, inline-blocks, and floats, shrink-wrap around their children. The block within an inline inherently wants to "have" a line to itself, which is why it makes its parent stretch to the right and left edges of its body parent.
Franky, placing a div inside an anchor makes little sense. All you really need is just an anchor tag that serves its purpose. And, interestingly, if you display an anchor as a block, then the clickable link area will only be the width of the anchor. You have less markup and the functionality that you want.
Here's the jsfiddle: http://jsfiddle.net/hhm46/2/.
Here's HTML:
Download PDF
<p>Sample paragraph</p>
Here's CSS:
a[href $= ".pdf"] {
display: block;
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: background-color 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
a[href $= ".pdf"]:hover {
transition: 0.5s;
background-color: limegreen;
}

Answer 2

You should wrap the anchor tags inside the div, not outside. Fiddle.
<div class="download_link">Download PDF</div>

Answer 3

Simple, div is a block level element by default. Change it to display:inline-block or display:inline.
Inline Block Demo: http://jsfiddle.net/3Ld8U/2/
Though as #josh mentioned you may be better off putting the a inside the div

Answer 4

Two ways to do this:
I found a workaround for you:
<div id=wrapit style="width:200px; margin:0 auto 0 auto;">
<a href="http://www.example.com">
<div class="download_link">Download PDF</div></a></div>
If you would like for the anchor tag to go in the div like the others have recommended, I recommend you increase the padding of the anchor tag so that it extends to the edge of the borders.
.download_link a {
padding: 0 20px 0 20px;
}