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.

issue

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; } 

final result

jsfiddle.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -