Background color does not work

Question

I am trying to apply the background color for the whole c_date block .. but it doesn’t work .. I tried clearly, blocked 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

 .c_date { position: relative; width: 40px; color: #999; margin: -0px 0 0 0; background-color: #999 !important; display:block; border:1px solid #ccc; clear:both; height: 30px; //change to your needs } 

Answer 2

This is because the height of your c_date is 2px (reason: absolute, in other containers). That way you can fix this by adding height to the c_date style or by changing the position property of the children in it.

Answer 3

This can be done without the need for position:absolute spaces of the day and month. This will mean that the height of your c_date element actually depends on the height of the stacked elements of the day and month.

I took the liberty of correcting some of the CSS code, which also did not have to appear in your demo :)

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