HTML, CSS, may a circle be a link? - html

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"></div>
<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></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;
}
<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>
http://jsfiddle.net/KquSh/