UserX UserX - 5 months ago 21
CSS Question

The clickable area for my link is too large

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?



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

This is cause you set your image to be display: block; that expands it to the full available width -> pushing your A element boundaries to the extreme.

Instead just keep your 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;
}

Also you had lot of useless CSS in your code so I've removed the unneeded stuff out of it, like for example there's no need to set to a DIV element to be width: 100% ; and expecially than float:left; (unless for some mysterious reasons) ... see the demo link