CODEWITHSUNDEEP
csslayout
Eric
Eric

Reputation: 5215

How to stack smaller text in CSS?

I have this little bit of text on my page:

enter image description here

I need to place the month (DEC) on top of the year (2013). How can I do this with CSS?

Using BR, or floats, seems to lead to all kinds of crazy formatting problems. Obviously, as the date changes, so does the width, so I can't lock it into a fixed width.

What I have so far:

html

<span class='month'>DEC</span><span class='year'>2013</span>

css

margin-left:20px;
position:relative;
top:-12px;
padding:12px 20px;
font-size:18px;
text-align:right;

Upvotes: 0

Views: 48

Answers (1)

yeyene
yeyene

Reputation: 7380

Check this one, DEMO http://jsfiddle.net/yeyene/VPZgV/2/

HTML

<div class="day">
    <span class="date">31</span>
    <div class="mth_yr">
        <span class='month'>DEC</span>
        <span class='year'>2013</span>
    </div>
</div>

CSS

.day{
    float:left;
    padding:10px;
    background:#F0EAE9;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.date{
    float:left;
    padding:8px 10px 2px 10px;
    border-right:3px solid #fff;
    font-size:30px;
    font-weight:bold;
    height:50px;
    background:#E9A3A0;
    color:#fff;
}
.mth_yr{
    float:left;
    width:35px;
    height:50px;
    padding:10px 10px 0px 10px;
    background:#E9A3A0;
    color:#fff;
}

Upvotes: 2

Related Questions