css - Double last-child calls, one works, the other doesn't -

css - Double last-child calls, one works, the other doesn't -

i have code here: http://jsfiddle.net/u9bsd/2/

you see sec section #indoorrange last-child beingness applied pushing lastly box right , extending width 1% more. first section #membership exact same, 3 blocks last-child class not effecting element should. there rule surrounding last-child rule not aware of?

thank help.

<div id="memberships"> <div class="greyheading"> <header> <h3>individual membership:</h3> </header> <p>$175.00</p> </div> <div class="greyheading"> <header> <h3>family membership:</h3> </header> <p>$200.00 (includes spouse , children under 21)</p> </div> <div class="greyheading"> <header> <h3>red, white , bluish discounts:</h3> </header> <p>active le, military, , 1st responders: 1/2 cost membership discount!</p> <p>retired le, armed forces , 1st responders 25% discount on membership!</p> </div> <div class="cl"></div> </div> <div id="indoorrange"> <div class="greyheading"> <header> <h3>range fees</h3> </header> <p>the range fees per session. "session" defined visit allen arms indoor shooting range. reserve right limit sessions 1 hr if other customers waiting lanes.</p> <p>all lanes limited 2 shooters unless special permission obtained in advance.</p> </div> <div class="greyheading"> <header> <h3>single session</h3> </header> <ul> <li>one adult shooter: $10.00</li> <li>two adult shooters on same lane: $7.50 each</li> <li>children under 18 paying adult guardian: free</li> </ul> </div> <div class="greyheading"> <header> <h3>ladies day</h3> </header> <p>every quarta-feira ladies day! women shoot $5.00. additionally, women receive 20% off range memberships.</p> </div> <div class="greyheading"> <header> <h3>red white , bluish discounts</h3> </header> <p>law enforcement, active duty military, first responders, , security personnel pay $5.00 per session time, , receive 50% discount on memberships!</p> </div> </div> #memberships .greyheading { float: left; width: 32%; margin: 0 1% 0 0; } #memberships .greyheading:last-child { float: right; margin: 0; width: 33%; } #memberships .greyheading header { background: #666; margin: 0 0 10px 0; } #memberships .greyheading header h3 { color: #fff; text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); line-height: 25px; margin: 0; padding: 5px 0 1px 5px; } #indoorrange .greyheading { float: left; width: 24%; margin: 0 1% 0 0; } #indoorrange .greyheading:last-child { float: right; margin: 0; width: 25%; } #indoorrange .greyheading header { background: #666; margin: 0 0 10px 0; height: 55px; } #indoorrange .greyheading header h3 { color: #fff; text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); line-height: 25px; margin: 0; padding: 5px 0 1px 5px; }

remove <div class="cl"></div> html , add together #indoorrange { clear: both; } css, believe fixes it.

the styling wasn't applied lastly memberships greyheading due <div class="cl"> element wasn't lastly child.

edit: fiddle proof

edit2: right cl div having style applied, may able utilize last-of-type pseudo selector accomplish want also, don't know browser back upwards unfortunately.

see question more information:

css last-child selector: select last-element of specific class, not lastly kid within of parent?

css css3