layout - How to stack smaller text in CSS? -


i have little bit of text on page:

enter image description here

i need place month (dec) on top of year (2013). how can css?

using br, or floats, seems lead kinds of crazy formatting problems. obviously, date changes, width, can't lock fixed width.

what have 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; 

check 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; } 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

android - Inheriting from Theme.AppCompat* -