Question

I want to display boxes in css for every single users according to their success in any games. For example, a user gets 70 points in my website and there will be a box about 220px width and it displays 70(font-size:80px and different font family.) and right below of it, it will say “Not bad”(about 20 px and Times new Roman font-family). Or if he/she gets 30 points, i want to display that box as their points 30, and below it “Bad”. The codes i used for it seems not working at all. Its outputs is very different and silly. Or it keeps changing everytime when the score are changing. In other words, boxes are not stable. The codes:

 <span style="font-family: 'Londrina Shadow', cursive; font-size:80px; color:#990;width:220px; padding:10px;border:5px solid gray; margin:0px;">
                70

                  <span style="font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; color:#CCC;">
                  <br>
                Not Bad
                </span>
                </span>

The output i expected is like this(70 is much bigger than “Not bad”)

I------------I
I    70      I
I   Not Bad  I
I            I
I------------I

How can i do this? I hope i explained well about what i needed. New in css…
Thanks

Answer 1

This is one approach:

div {
    display: inline-block; /* stops the div taking the full width, allowing
                              multiple 'boxes' to appear on the same line */
    border: 1px solid #000;
    width: 220px;
    font-size: 1em;
    text-align: center; /* just because your text seemed centre-aligned;
                           adjust to taste */
}

div > span {
    display: block; /* to force a new-line, and allow a width declaration */
    font-size: 80%; /* font-size 80% of the parent div */
}​

Note that I’ve used div to wrap the content in place of a span, and I’ve removed the unecessary br element.

JS Fiddle demo.