Question

I have the following html:

<div class="horizontal">
    <div class="biggest">t e s t <div class="circle">1</div></div>
    <div>t e s t <div class="circle">2</div></div>
    <div>t e s t <div class="circle">3</div></div>
</div>

with the following css:

.horizontal div {
    float: left;
    width: 1em;
    letter-spacing: 1em;
    word-wrap: break-word;
    font-size: 100%;
}
.biggest {
    font-size: 150%;
}
.circle {
    border-radius: 50%;
    background-color: red;
}

My output: http://jsfiddle.net/ZaffJ/3/

The following are what I don’t understand about what I’m getting:

1. I was expecting the first column encapsulated in class biggest to have a larger font size than the rest of the columns, yet I’m getting a uniform font size for all 3 columns.
2. I was expecting a nice circle around each number in class circle having set border-radius: 50%. What I’m actually getting are some weird ovals.
3. (update) To have the number in class circle to show up in it’s centre.

Can anyone explain to me what’s going on and how I could possibly achieve my wanted output?

Answer 1

Set the line-height of .circle to 100%. The css should be .horizontal .biggest { } and not just .biggest { }. You could also set it like this:

.biggest {
    font-size: 150% !important;
}

 
Full CSS

.horizontal div {
    float: left;
    width: 1em;
    letter-spacing: 1em;
    word-wrap: break-word;
    font-size: 100%;
}
.horizontal .biggest {
    font-size: 150% ;
}
.circle {
    border-radius: 50%;
    line-height: 100%;
    background-color: red;
}
.circle span {
    text-align: center;
    width: 2em;
    display: block;
}

Wrap your numbers within span’s like this:

<div>t e s t <div class="circle"><span>2</span></div></div>

Jsbin: http://jsbin.com/uwuquh/1/edit