6

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); }
Improve this question
5
  • Your c_date block is rendering with 2px height. You need to cleanup your markup, Try adding some height(say 50px) to it and you'll see the background color. Commented Aug 28, 2014 at 6:41
  • 1
    this is because use absolut postion for .c_day, .c_month, .c_year, if add height for c_date every thing is ok Commented Aug 28, 2014 at 6:41
  • 1
    you are using position:absolute on your span elements. this takes them out of being registered as elements effecting the parent div Commented Aug 28, 2014 at 6:41
  • 1
    And don't use same color and backgorund color, Commented Aug 28, 2014 at 6:42
  • Thanks Samy.. if I specify height, its working.. :-).. Commented Aug 28, 2014 at 6:42

3 Answers 3

Reset to default
5

This is because your c_date div height is 2px enter image description here (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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

+1 I think you should write an answer too.
4

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

Improve this answer

Comments

3 
.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 }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.