nCore
Members
-
Joined
-
Last visited
-
Heres the code though. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="link_container"> Header </div> <!-- End of link container --> <div class="clearboth"></div> <div id="head_container"> <div id="sub_left_header"> Logo </div><!-- End of sub left header --> <div id="sub_right_header"> Slogan </div><!-- End of sub right header --> </div><!-- End of main header --> <div id="body_container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat accumsan est eu interdum. Etiam sed purus sem, a auctor ipsum. Phasellus massa nunc, venenatis semper tincidunt id, luctus quis ligula. In vitae aliquam lorem. Nam nec lectus erat, ut elementum odio. Vivamus in mi at lectus hendrerit fringilla. Aliquam vehicula felis nec leo ullamcorper vel vehicula erat suscipit. Nunc eu tortor in nunc pharetra tincidunt. Maecenas posuere eleifend orci sit amet euismod. Suspendisse potenti. Curabitur in enim tortor. Maecenas eu quam at massa vulputate ultrices eget ac diam. Fusce pellentesque auctor mauris vitae tempus. Nam in sem nunc. </p> </div><!-- End of main Body Container--> <div id="footer"> Footer </div><!-- End of Footer--> </div><!-- End of main Container --> </body> </html> CSS @charset "utf-8"; /* CSS Document */ body{ margin:0 auto; background-image:url(imgs/bg3.jpg); background-repeat:repeat-x; background-color:#68a621; color:#FFFFFF; font-size:14px; } #container{ width:100%; height:100%; min-height:100%; position:relative; } /* Link Section */ #link_container{ width:100%; height:25px; top:0; position:relative; background-color:#C96; clear:both; } /* End of Link Section /* Header Section */ #head_container{ width:1024px; height:80px; background-color:#0099FF; margin:0 auto; } #sub_left_header{ float:left; width:512px; background-color:#996600; } #sub_right_header{ float:right; width:512px; background-color:#99F; } /* End of Head Section */ /* Body Section */ #body_container{ width:1024px; height:auto; background-color:#999999; margin:0 auto; clear:both; position:relative; } /* End of Body Section */ /* Footer Section */ #footer { position: relative; clear:both; bottom:-190px; width:100%; min-width:100%; margin-top:15px; padding-bottom: 17px; padding-left: 1px; padding-right: 1px; padding-top: 3px; background-color: rgb(119, 119, 119); border-top:10px solid #069; box-shadow: -5px -5px 7px #000; -moz-box-shadow: -5px -5px 7px #000; -webkit-box-shadow: -5px -5px 7px #000; } .clearboth{ height:50px;; clear:both; }
-
Hello, I'm kinda having a trouble regarding to my footer :'( I can't put it at the bottom of the page like when the main content has a short article the footer don't stay at the bottom. If i use position:relative it stays at the bottom when the article is long but if its short it kinda follow the main content and doesn't stay at the bottom of the page. then if I use position:absolute when the article is long it kinda overlap it, but not actually at the bottom of it. I used z-index:-1; as well so the footer goes behind the main content. So, how can I fix this I want it to stay at the bottom of the page whether the article is short or long without using position:fixed. I posted the whole css so people can look it up whats wrong or something. Please help me out @charset "utf-8"; /* CSS Document */ body{ margin:0 auto; background-image:url(imgs/bg3.jpg); background-repeat:repeat-x; background-color:#598c15; color:#FFFFFF; font-size:14px; } #container{ width:100%; height:auto !important; min-height:100%; position:relative; } /* Link Section */ #link_container{ width:100%; height:25px; top:0; position:relative; background-color:#C96; clear:both; } /* End of Link Section /* Header Section */ #head_container{ width:1024px; height:80px; background-color:#0099FF; margin:0 auto; } #sub_left_header{ float:left; width:512px; background-color:#996600; } #sub_right_header{ float:right; width:512px; background-color:#99F; } /* End of Head Section */ /* Body Section */ #body_container{ width:1024px; background-color:#999999; margin:0 auto; clear:both; position:relative; } /* End of Body Section */ /* Footer Section */ #footer { position: relative; z-index:-1; clear:both; bottom:0px; width:100%; min-width:100%; margin-top:15px; padding-bottom: 17px; padding-left: 1px; padding-right: 1px; padding-top: 3px; background-color: rgb(119, 119, 119); border-top:10px solid #069; box-shadow: -5px -5px 7px #000; -moz-box-shadow: -5px -5px 7px #000; -webkit-box-shadow: -5px -5px 7px #000; } .clearboth{ height:50px;; clear:both; }
