So, I had help from before, but my stuff was so unorganized, that it was hard for me to understand what someone was doing. It left me off here, I have my vertical alignment, but now my footer for some reason cuts off half way and my social icons stay right beside my powered by even though they're suppose to be aligned/floating to the right...
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 the layout by adjusting your CSS as follows:
#footer {
background-image:url('http://zevoxa.com/images/footer_bg.png');
bottom repeat-x;
width:100%;
height: 110px;
}
#footerContent {
display:table;
width: inherit; /* You can adjust this 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; /* just to show where the 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
to display: table
and inherit the height from the parent element (#footer
). You can set the width in a variety of ways depending on what you need. In my example, I set it to full width, default behavior.
For the two child elements, set their display type to table-cell
and vertical-align: middle
, you already have text-align set the right way. By default, the two cells will be of equal size, 50% of the parent's width.
No need for floats.
Aside
You may not need the two wrappers, #footer
and #footerContent
unless you need the second div for some other purpose (extra background image for example). Depends on other factors in your design. (See second example in fiddle.)