CODEWITHSUNDEEP
htmlcssbutton
jp963
jp963

Reputation: 77

Mouse over pointer extends past div button surrounded by a tags, why?

I have a div button underneath some text and the following css supplied to it:

<div id="text">
    <h1>Lorem ipsum <b>dolor</b></h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
    <a href="blog">
        <div id="blog_button">Blog</div>
    </a>
</div>

div#blog_button {
width:90px;
height:30px;
background-color:#E31F2D;
border-radius:2px;
text-align:center;
vertical-align:middle;
line-height:30px;
margin-top:20px;

}

When hovering over the div the default mouse changes to pointer past the right hand edge of the button along to the edge of its container div instead of just over the button. How can I stop this? I only want it over the button.

Upvotes: 0

Views: 73

Answers (2)

Anonymous
Anonymous

Reputation: 10216

It's because a div is block level element and the block level elements take up as much horizontal space as they can without setting a width. You could fix the issue by adding display: inline-block; property to the div#blog_button like this:

JSFiddle - DEMO

div#blog_button {
    display: inline-block; /* add this */
    width:90px;
    height:30px;
    background-color:#E31F2D;
    border-radius:2px;
    text-align:center;
    vertical-align:middle;
    line-height:30px;
    margin-top:20px;
}

Upvotes: 2

markbernard
markbernard

Reputation: 1420

Because a div is a block element. Block elements extend to the full width of the containing element. If you add display:inline to your style that will fix it.

Upvotes: 0

Related Questions