Sun, 2009-04-05 17:43
I'm trying to style a theme for the nuke evolution system. Normaly it is done using tables but I had some request of people who would like to have a 100% css theme for that system.
it's working quite well except for the footer
I have 3 main div's "header", "bodymain" and "footer"
bodymain and footer are set to position relative (so I can place all the div's in it using absolute).
now I have a problem with the footer which is displayed on top of bodymain div instead of under it, normally "clear:both;" should push it below but it won't.
any suggestions?
a preview can be found here -> http://i119.photobucket.com/albums/o134/krike06/frozen.png
here is the css:
/*#################################################### FOOTER CSS ###################################################"*/ #footer{ position: relative; height: 253px; width: 100%; background-image: url('../../../themes/frozen/images/footer_background.jpg'); background-repeat: repeat-x; clear: both; } /* footer container main div */ #footer #container{ position: relative; top: 0px; width: 980px; margin: 0 auto; } /* footer copyright main div */ #footer #copyright{ top: 26px; position: absolute; text-align: left; width: 220px; padding: 0px; } /* footer affiliates main div */ #footer #affiliates{ text-align: left; position: absolute; width: 220px; left: 300px; margin-top: 26px; } #footer #affiliates ul, #footer #newsarticle ul{ padding: 0px; margin: 0px; line-height: 15px; list-style-type: none; } /* footer newsarticle main div */ #footer #newsarticle{ position: absolute; text-align: left; width: 480px; margin-left: 500px; top: 26px; } #footer #copyright .title, #footer #affiliates .title, #footer #newsarticle .title{ clear: both; font-size: 18px; font-weight: bold; padding-bottom: 10px; color: white; } #footer #copyright .text, #footer #affiliates .text, #footer #newsarticle .text{ color: white; line-height: 16px; font-size: 10px; font-weight: bold; } #footer #copyright .text a, #footer #affiliates .text a, #footer #newsarticle .text a{ color: #8b9a9c; font-size: 10px; font-weight: bold; } /*#################################################### HEADER CSS ###################################################"*/ #header{ text-align: left; margin: 0 auto; } /*#################################################### BLOCK CSS ###################################################"*/ #block{ background: #afbbbc; width: 200px; padding: 5px; } .blocktitle{ text-decoration: none; font-weight: bold; font-size: 16px; margin-top: 20px; margin-bottom: 6px; } /*#################################################### NEWS & NORMAL BLOCK CSS ###################################################"*/ #newsarticlecenter{ border: 1px solid #bcc3c4; background-color: #dde4e5; padding: 10px; margin: 15px 10px 15px 10px; color: #394547; width: auto; } #newsarticlecenter #newstitle, #newstitle strong{ color: #394547; font-size: 12px; font-weight: bold; } #centerblock{ border: 1px solid #bcc3c4; background-color: #dde4e5; padding: 10px; margin: 15px 10px 15px 10px; color: #394547; width: auto; } /*#################################################### BODY TABLE CSS ###################################################"*/ #bodycontainer{ position: relative; margin: 0 auto; width: 1000px; clear: both; } #blockleft{ position: absolute; text-align: left; top: 0px; left: 0px; bottom:0px; } #blockright{ text-align: left; position: absolute; top: 0px; left: 790px; bottom:0px; } #bodymain{ position: absolute; text-align: left; width: 560px; left: 220px; top: 0px; }