Jump to content

Div not going to the bottom?

pizzaguy

By pizzaguy
in CSS

Recommended Posts

pizzaguy Member

pizzaguy

Posted
Posted

Alright ive been trying to figure this out and now its just now working. To explain things, I am trying to remake my website with a new look. I want the footer to always be at the bottom, but i cant figure out how to make the container div to go to the full size of the page, because height: 100% is 100% of the necessary (correct me if im wrong) space. Then i found a css trick to get it to goto the bottom by doing "position:absolute; bottom: 0;", that worked but in CSS the footer stopped being center and that was explained because absolute postioning and margin auto dont work together. So now i tried going back to just having the footer be at the end of the rest of the page (no matter where it is), but now the footer just goes up to the top, even though there are div's above it. Here is a link to see it (notice the two lines near the menu, the second one is supposed to be the separator for the footer).http://www.yesiwouldlikefrieswiththat.com/Test/TestSite/Here is the HTML:

<!DOCTYPE htmlPUBLIC "-//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>YesIWouldLikeFriesWithThat.com</title>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />		<meta http-equiv="imagetoolbar" content="no" />		<meta name="Description" content="A Waste of time and space on the World Wide Web" />		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />		<link rel="icon" href="favicon.ico" type="image/ico" />		<link rel="stylesheet" type="text/css" href="styles.css" />		<script type="text/javascript">		/***********************************************		* Bookmark site script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)		* This notice MUST stay intact for legal use		* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code		***********************************************/		/* Modified to support Opera */		function bookmarksite(title,url){		if (window.sidebar) // firefox			window.sidebar.addPanel(title, url, "");		else if(window.opera && window.print){ // opera			var elem = document.createElement('a');			elem.setAttribute('href',url);			elem.setAttribute('title',title);			elem.setAttribute('rel','sidebar');			elem.click();		} 		else if(document.all)// ie			window.external.AddFavorite(url, title);		}		</script>	</head>	<body>		<div id="container">				<div id="header">					<a href="index.html">					<img src="images/header.png" id="header_image" alt="YesIWouldLikeFriesWithThat.com" />					</a>					<ul>						<li><a href="index.html" class="current">Home</a></li>						<li><a href="pictures.html" class="menua" >Pictures</a></li>						<li><a href="favorites.html" class="menua" >Favorites</a></li>						<li><a href="/Blog2/" class="menua" >Blog</a></li>						<li><a href="yt.php" class="menua" >Video Mirror</a></li>						<li><a href="java script:void(0)"  class="menua" onclick="java script:bookmarksite(document.title,document.location.href)">Bookmark</a></li>					</ul>				</div>				<div class="div"></div>				<div id="main">					<div id="sidebar">						<div class="sidebox">							<input type="text" id="boss-type" size="2" value="Web" readonly="readonly" onclick="if(this.value=='Web') { this.value='Site'; } else { this.value='Web'; }"></input>							<input type="text" id="boss" size="20" value="Yahoo! Search" onclick="this.value=''"></input>							<input class="buttonSubmit" type="submit" value="Go" onclick="MakeSearch();"></input>						</div>						<div class="sidebox" id="blogfeed">							<h3>Latest from the blog</h3>						</div>					</div>					<div id="main_body">						<h1 class="center">Welcome!</h1>						<p>Welcome to YesIWouldLikeFriesWithThat.com! I Would like to thank you for taking your time to visit my worthless website.						I mean, there is nothing good here, why would you visit it? There are no viruses popups or spam, but there is nothing worth						wasting your time on. Your not going to find anything decent like Political news, the Oboma or Clinton campaign, Bush or the						war in iraq. And, despite the name, you will not find anything regarding fries, fast food, fast food chains, Copyrighted						names, symbols or letters, fast food diets, fatty oils, freedom fries, french fries, supersized meals, undersized meals, 						disgusting meals, or meals on wheels. By continuing to explore this site, you will loose a portion of your life that you						will never be able to get back.</p>						<p>Okay, fine dont leave! Just stay here and read my rants and learn how the internet is going to cause World War III. Yep,						thats right, the internet is going to cause World War III. I know it, other people probably know it, and you should know it too.						So yeah, keep reading and contribute your part into destroying the world! Have a nice day.</p>					</div>				</div>				<div class="div"></div>		</div>	</body></html>

Here is the CSS: (Note I have a #footer element in there but i removed the footer div for now right now the footer is simply the bottom "<div class="div"></div>")

html,body {  	margin: 0; 	padding: 0; }body{	background-color: #0C0C0C;	background-image: url('images/top_detail.png');	background-repeat: repeat-x;	font-size:16px;	font-family: calibri,verdana,sans-serif,times;	height: 100%;	min-height: 100%;}#container{	width: 960px;	height: 100%;	min-height: 100%;	margin: 0 auto;}div .div{	height: 2px;	width: 920px;	margin: 2px auto;	background-image: url('images/div.png');	background-repeat: repeat-x;}#header{	width: 960px;	height: 130px;}#header_image{	margin: 34px 29px 0px;	border: 0px solid #000;}div #header ul{ 	float: right; 	margin: 0px 30px;}div #header ul li{	display: inline;	list-style-type: none;	margin: 0px 2px;}.menua{	text-decoration: none;	color: #808080;	outline: none;	padding: 0px 6px;}.menua:hover, .menua:active, .menua:focus{	text-decoration: none;	color: #808080;	height: 18px;	border: 1px solid #1E1E1E;	outline: none;	padding: 0px 5px;	background-image: url('images/button_over.png');}.current,.current:hover, .current:active, .current:focus{	text-decoration: none;	color: #808080;	border: 1px solid #18262E;	outline: none;	padding: 0px 5px;	background-image: url('images/button_sele.png');}#main{	padding: 0px 30px;	width: 900px;	color: #808080;	height: 100%;	min-height: 100%;}#footer{	/*position: absolute;	bottom: 0;*/	margin:5px auto;	vertical-align: text-bottom;}#main_body{	float: right;	width: 600px;}#sidebar{	float: left;	height: 200px;	padding: 10px 20px;}.sidebox{	width: 250px;	border: 1px solid #2D2D2D;	min-height: 30px;	margin: 20px 0px;}#boss {	border:1px solid #262626;	margin:6px 0px 6px 0px;	padding:2px;	color: #808080;	background-color: #0C0C0C;}#boss-type{	position:relative;	border:1px solid #262626;	margin:6px 0px 6px 0px;	padding: 2px;	color: #808080;	background-color: #0C0C0C;	left: 5px;	cursor: pointer;}#search-input{	text-align: center;	padding: 0 0 0 0;	width:400px;	height: 40px;	background-image: url('bar.png');	margin: 0px auto 0px auto;}#blogfeed{	padding: 5px 0px;}h3{	margin: 0px 10px;}.buttonSubmit{	position:relative;	top: 2px;	right: 5px;	width:30px;	height:22px;	color:#808080;	padding:3px;	background:url('images/button_over.png') repeat-x left top;	cursor:pointer;	border: 1px solid #1E1E1E;}

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

the link is so you can go see the Sticky Footer code at that site.If you want/need the Footer to "stick" to the bottom of your viewport, go see how to do it.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...