hi i have a problem with my site's footer. the footer is supposed to contain: text on the left side - text in the center that will be taken from a database - and an image on the right. the left and right sides needs to be vertically centered according to the middle div. the main problem Is: centering the left&right dives vertically to the middle div considering that it has no fixed height. another problem - between the 3 dives i have 2 lines (background images - 'height:100%) that are graphic separators. - If I give the middle div 'height:auto' those two background images disappear (in ff) or cut in the middle (in ee). could this even be done with div's or should I just make it all so simple and do the footer as a table?? thanks! here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> html{height:100%;} body {margin:0; padding:0; height:100%; font-family:Arial, Sans-Serif; font-size:12px; color:#000000;} /* PAGE BORDERS */ #spacer {min-height:100%; width:936px; margin-left:auto; margin-right:auto; padding-top:400px; padding-left:5px; padding-right:5px; border-left:1px solid #cccccc; border-right:1px solid #cccccc;} /* GRAY DIV */ #footer_gray {float:left; background-color:#3a3a3a; width:100%; height:90px; /*height:auto;*/} /* PHONE NUMBERS - LEFT DIV */ #footer_gray .txt{float:left; color:#c2c2c2; font-size:11px; font-weight:bold; margin-left:5px; margin-right:5px; max-width:170px; background-color:#999900;} #footer_gray .txt span {font-size:11px; color:#ffffff; font-weight:bold;} /* QUICK LINKS - CENTER DIV */ #footer_gray .links_txt {float:left; color:#c2c2c2; width:605px; margin-left:8px; background-color: #663333;} #footer_gray .links_txt span {color:#ffffff; font-weight:bold;} #footer_gray .links_txt a{color:#c2c2c2; font-weight:normal; text-decoration:none;} #footer_gray .links_txt a:hover{color:#b9dffb; text-decoration:underline;} /* SEPARETING LINES - IMG */ .vertical_line_space{background:url(languages/lan_en/images/br.gif); height:100%; width:3px; float:left;} .vertical_line_space2{background:url(languages/lan_en/images/br.gif); height:100%; width:3px; float:right;} /* IMAGE - LEFT DIV */ .price_match{/*background:url(languages/lan_en/images/img_pricemtch.gif);*/ background-color:#FFCC00; width:86px; height:77px; margin-right:25px; margin-left:25px; float:right;} </style> </head> <body> <div id="spacer"> <div id="footer_gray"> <div class="txt"> <span>TEXT HERE NEEDS TO BE CENTERED VERTICALLY</span><br/><br/> Toll Free France <span>1-800-000-000</span><br/> Toll Free USA <span>1-800-000-0000</span> </div> <div class="vertical_line_space"></div> <div class="links_txt"> <span>THIS DIV CANNOT HAVE FIXED HEIGHT - THE TEXT WILL COME FROM A DATABASE</span><br/><br/> <span>Quick Links</span> - <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Guarantees</a> | <a href="#">Affiliate Program</a> | <a href="#">News</a><br/> <span>Customer Service</span> - <a href="#">How To Order</a> | <a href="#">Order Status</a> | <a href="#">FAQs</a> | <a href="#">Contact Us</a><br/> <span>Policies</span> - <a href="#">Shipping</a> | <a href="#">Prescriptions</a> | <a href="#">Privacy</a> | <a href="#">Cancellations</a> | <a href="#">Returns</a> | <a href="#">Refunds (order never arrived, wrong item received etc.)</a> - <a href="#">Shipping</a> | <a href="#">Prescriptions</a> | <a href="#">Privacy</a> | <a href="#">Cancellations</a> | <a href="#">Returns</a> | <a href="#">Refunds (order never arrived, wrong item received etc.)</a> - <a href="#">Shipping</a> | <a href="#">Prescriptions</a> | <a href="#">Privacy</a> | <a href="#">Cancellations</a> | <a href="#">Returns</a> | <a href="#">Refunds (order never arrived, wrong item received etc.)</a> </div> <div class="price_match">IMG HERE NEEDS TO BE CENTERED VERTICALLY</div> <div class="vertical_line_space2"></div> </div> </div> </body> </html> Code (markup):