HTML, CSS, may a circle be a link?

Question

I successfully "rendered" circles in HTML:

.articleBoxCircleInner
{
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    width: 14px;
    height: 14px;
    background-color: #707678;
    float: left;
    margin-right: 10px;
}

<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>

http://jsfiddle.net/6e9dE/

however, they cant be links (I cant surround with A tag). How to do it?

Answer 1

Why wrap them when you can simply make them an anchor?

<a href="http://stackoverflow.com"
    class="articleBoxCircleInner"></a>

jsFiddle Demo 1

If you insist, you can still wrap them (I don't see why you didn't succeed earlier).

<a href="http://stackoverflow.com">
    <div class="articleBoxCircleInner"></div>
</a>

jsFiddle Demo 2

Answer 2

Like this: FIDDLE

HTML:

<div class="articleBoxCircleInner"><a href="#"></a></div>
<div class="articleBoxCircleInner"><a href="#"></a></div>
<div class="articleBoxCircleInner"><a href="#"></a></div>

CSS:

.articleBoxCircleInner
{
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    width: 14px;
    height: 14px;
    background-color: #707678;
    float: left;
    margin-right: 10px;
}
.articleBoxCircleInner a{
    display:block;
    height:100%;
    width:100%;
}

Answer 3

If you have a block containing a float (which is what happens if you wrap your <div> in a link, the block won't expand its height to include the floated item by default. One quick fix is to add an overflow to the container, like this:

.articleBoxCircleInner
{
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    width: 14px;
    height: 14px;
    background-color: #707678;
    float: left;
    margin-right: 10px;
}

a {
    overflow: auto;
}

<a href="http://jsfiddle.net/6e9dE/"><div class="articleBoxCircleInner"></div></a>
<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>

http://jsfiddle.net/KquSh/