css - Float left, float right aren't working -
as can see in jsfidle:
.footer { background-image:url('/images/footer_bg.png') bottom repeat-x; height: 110px; } #footercontent { display:table-cell; vertical-align: middle; height:110px; } #leftfoot { float: left; font-family:maven; font-size: 15px; padding-left: 20px; } #rightfoot { float: right; } the #rightfoot right-floated divider isn't displaying on right of page, instead alongside #leftfoot, why this?
this happening because #footercontent set display table-cell , has no parent width. width controlled content within.

to resolve this, i've given parent divider set display table 100% width:
<div id="footercontainer"> <div id="footercontent"> ... </div> </div> #footercontainer { display:table; width:100%; } to align #rightfoot content right, i've given text-align of right:
#rightfoot { text-align:right; } 
Comments
Post a Comment