background color is not working

Question

Im trying to apply background color for whole block c_date.. but its not working.. I tried clear, block everything..

Demo

HTML:

<div class="c_date"> <span class="c_day">30</span>
 <span class="c_month">Jun</span>
 <span class="c_year">2009</span>
    <div style="clear:both;"></div>    
</div>

CSS:

.c_date {
    position: relative;
    width: 40px;
    color: #999;
    margin: -0px 0 0 0;
    background:#999 !important;
    display:block;
    border:1px solid #ccc;
    clear:both;
}
.c_day, .c_month, .c_year {
    position: absolute;
}
.c_day {
    font-size: 14px;
    top: 10px;
}
.c_month {
    top: 0;
    left: 0;
    font-size: 11px;
}
.c_year {
    top: 9px;
    right: 0;
    font-size: 9px;
    rotation: -90deg !important;
    /* ** Hacks ** */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

Answer 1

This is because your c_date div height is 2px (the reason is position:absolute; in your other containers). So you can fix it by adding height to c_date style or changing position property of child elements in it.

Answer 2

This can actually be done without the need to position:absolute the day and month spans. This will mean that the height of your c_date element is actually relative to the height of the stacked day and month elements.

I took the liberty of fixing up some of the CSS code that didnt need to be there from your demo too :)

HTML

<div class="c_date">
    <span class="c_month">Jun</span><br />
    <span class="c_day">30</span>
    <span class="c_year">2009</span>
</div>

CSS

.c_date {
    position: relative;
    width: 40px;
    color: #999;
    margin: 0 0 0 0;
    background:#00F !important;
    display:block;
    border:1px solid #ccc;
    font-size:0; /* set to 0 so that <br/> and spaces between <span> dont effect height/spacing */
}
.c_year {
    position: absolute;
}
.c_day {
    font-size: 14px;
    display: inline-block;
    line-height: 11px;
    padding-bottom: 2px;
    text-align:center;
}
.c_month {
    font-size: 11px;
    display: inline-block;
    line-height: 14px;
    text-align:center;
}
.c_year {
    top: 9px;
    right: 0;
    font-size: 9px;
    /* ** Hacks ** */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

DEMO