html - Vertically aligning footer content -

so, had before, stuff unorganized, hard me understand doing. left me off here, have vertical alignment, footer reason cuts off half way , social icons stay right beside powered though they're suppose aligned/floating right...

http://jsfiddle.net/4kdem/

html

<div id="footer">  <div id="footercontent">  <div id="leftfooter">  $powered_by$  </div>  <div id="rightfooter">  <a href="#"><img src="http://zevoxa.com/images/social/facebook.png" /></a>  <a href="#"><img src="http://zevoxa.com/images/social/twitter.png" /></a>  <a href="#"><img src="http://zevoxa.com/images/social/youtube.png" /></a>  <a href="#"><img src="http://zevoxa.com/images/social/deviantart.png" /></a> </div> </div> </div> 

css

#footer {  background-image:url('/images/footer_bg.png');  bottom repeat-x;  height: 110px;  display:table-cell;  vertical-align: middle; } #footercontent {  display:table;  width:100%; } #leftfooter {  float: left;  font-family:maven;  font-size: 15px;  padding-left: 20px; } #rightfooter {  float: right;  text-align:right; } 

you can fix layout adjusting css follows:

#footer {     background-image:url('http://zevoxa.com/images/footer_bg.png');     bottom repeat-x;     width:100%;     height: 110px; } #footercontent {     display:table;     width: inherit; /* can adjust depending on other design factors*/     height: inherit; } #leftfooter {     display:table-cell;     vertical-align: middle;     font-family:maven;     font-size: 15px;     padding-left: 20px;     border: 2px dotted yellow; /* show edges are*/ } #rightfooter {     display:table-cell;     vertical-align: middle;     text-align:right;     border: 2px dotted yellow; } 

see fiddle: http://jsfiddle.net/audetwebdesign/pfrj8/

set #footercontent display: table , inherit height parent element (#footer). can set width in variety of ways depending on need. in example, set full width, default behavior.

for 2 child elements, set display type table-cell , vertical-align: middle, have text-align set right way. default, 2 cells of equal size, 50% of parent's width.

no need floats.

aside

you may not need 2 wrappers, #footer , #footercontent unless need second div other purpose (extra background image example). depends on other factors in design. (see second example in fiddle.)