The clickable area for my link is too large

Question

I have an <img> logo that is wrapped inside a link, and the link is wrapped in a <div>.

My code below results in the clickable area for my link to extend 100% horizontally to both edges of the viewport.

How can I make the clickable area for my link to be the size of my logo?

• jsFiddle

My HTML:

<div id="logo-container">
    <div id="logo">
    <a href="dashboard.php"><img src="http://placehold.it/350x150" /></a>
    </div>
</div>

My CSS:

#logo-container{
    width:100%;
    float:left;
    height:auto;
    margin:0 auto 0 auto;
    background:#ECECEA;
}

#logo{
    margin:0 auto;
    height:auto;
}

#logo img {
    display:block;
    margin:6px auto 10px auto;
}

#logo img{
    width:330px;
    height:auto;
}

Answer 1

This is cause image is set to display: block;, such expands it to the full available width, pushing the A element boundaries to the extreme.

Instead, keep the logo image inline and use text-align:center; for the #logo parent: http://jsfiddle.net/wLbo6mjr/10/

#logo{
    text-align:center;
}

#logo img {
    margin:6px 0 10px 0;
}