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