1 reply [Last post]
Maverick
Offline
newbie
Scotland
Last seen: 16 years 16 weeks ago
Scotland
Joined: 2004-08-03
Posts: 10
Points: 0

probably been asked before but im having float problems with my CSS code.

My footer is stuck way up at the top of the container and i need it at the bottom and its not wanting to play

my other two floating collumns are shimmying at the bottom and no matter what i try position wise they are still stuck there...

any solution help????

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SLSUK dot com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
/* Big shout out to the following peepz for their help in generating this CSS monster:
Rob Chandanais @ bluerobot.com for the layout ideas - http://www.bluerobot.com
the article posters at ALA - http://www.alistapart.com
the dudes and dudettes at glish - http://glish.com/css
and an UBER shout out to the guys at - http://www.csscreator.com */

/* begin vertical stack css format */
body { font-family: verdana; font-size: 10px; text-align: center;}
a:hover {font-family: verdana; font-style: normal; /*background-color: #999;*/ background: url(images/pipover.gif); text-decoration: none;}
a:active {font-family: Verdana; color: #fff; text-decoration: none;}

/* Begin Text Link formatting */
a:hover.dark { 	font-family: verdana; 
				font-style: normal; 
				color: #fff; 
				text-decoration: none;
				}
				
a:active.dark {	font-family: verdana; 
				color: #fff; 
				text-decoration: none;
				}

/* logo header */
#logo 		{ 	position: absolute; 
				top: 5px; 
				left: 50%; 
				margin-left: -375px;
				}

html>#logo { top: 5px:}

/* decorations */
#decoration1 { 	float: left; 
				top: 0; 
				height: 100%; 
				width: 80px; 
				background: #ccc; 
				border-right: 2px dashed #999;
				}
				
html>#decoration1 { width: 80px;}

#decoration2 { 	float: right; 
				top: 0; 
				height: 100%; 
				width: 80px; 
				background: #ccc; 
				border-left: 2px dashed #999;
				}
				
html>#decoration2 {width: 80px;}

/* body stuff */
#container 	{ 	position: absolute; 
				top: 85px; 
				left: 50%; 
				margin-left: -410px;  
				width: 820px; 
				border: 2px dashed /*#bf9960;*/ #999;
				background: url(images/background1.gif); 
				z-index: 3;
				}

html>#container { width: 820px;}

#navi 		{ 	float: left; 
				width: 820px; 
				height: 24px; 
				background: url(images/navi.gif); 
				/*
				border: 2px dashed #000;
				*/
				}

html>#navi { width: 820px;}

#newsbyte	{ 	float: left; 
				text-align: left; 
				margin-left: 240px;
				margin-top: 5px; 
				width: 200px; 
				padding: 5px; 
				border-right: 2px dashed #999;  
				z-index: 0; 
				voice-family: "\"}\""; 
				voice-family: inherit;
				}
				
html>#side  { width: 150px; height: 140px;}

#content 	{ 	float: left; 
				padding: 5px; 
				text-align: left; 
				margin-left: 10px; 
				margin-top: 30px; 
				height: auto; 
				width: 430px; 
				border-right: 2px dashed #999; 
				z-index: 1; 
				voice-family: "\"}\""; 
				voice-family: inherit;
				}
				
html>#content {width: 430px;}

#ads 		{ 	float: left; 
				padding: 5px; 
				margin-left: 200px; 
				margin-top: 30px; 
				width: 150px; 
				border: 1px dashed #ccc; 
				z-index: 0; 
				voice-family: "\"}\""; 
				voice-family: inherit;
				}
				
html>#ads { width: 200px; height: auto;}

/* thanks to Stu the Guru at csscreator.com forums for help - cheers bud*/
#foot 		{	float: left; 
				width: 100%; 
				bottom: 0px;
				height: 50px; 
				border-top: 2px dashed #ccc; 
				background-image: url(images/footer.gif);
				background: norepeat;
				z-index: 0;
				} 
				
html>#foot { width: 100%; bottom: 0; height: 50px;} 

/* secondary css menu style for DHTML menus */

/* 1st level listings */
ul 			{ 	margin: 0px; 
				list-style: none; 
				}
				
li 			{ 	float: left; 
				position: relative; 
				width: 95px; 
				background: url(images/pipline.gif); 
				/*
				background: #bfa260;
				*/ 
				padding: 0px; 
				/*
				border: 1px solid #bfa260;
				*/ 
				left: 40px;
				}
				
/* 2nd level listings */
li ul 		{	display: none; 
				position: absolute; 
				top: 22px; 
				left: -40px; 
				width: 95px; 
				display: none;
				}
				
ul li a 	{ 	display: block; 
				text-decoration: none; 
				color: #fff; 
				background: url(images/pipline.gif); 
				/*
				background: #bfa260;
				*/ 
				padding: 5px;
				}
				
li>ul 		{ 	top: auto; 
				left: auto;
				}
				
/* display menus */
li:hover ul, li.over ul {display: block;}
</style>

<script language="JavaScript" type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="logo"><a href="index.htm"><img border=0 src="images/logo.gif" id="SLSlogo" alt="Smart Learning Solutions"></a></div>

<div id="decoration1"></div>

<div id="decoration2"></div>

<div id="container">

<div id="foot"><center>ziz iz der footer</center></div>

<div id="navi">
  <ul id="nav">
    <li><a href="index.htm" id="homepage" alt="Homepage">Home</a></li>
    <li><a href="#" id="aboutTheCompany" alt="About The Company">About</a> 
        <ul>
          <li><a href="about.htm" id="aboutUs">About Us</a></li>
          <li><a href="contact.htm" id="contactUs">Contact</a></li>
          <li><a href="find.htm" id="locateUs">Find Us</a></li>
          <li><a href="message.htm" id="Message">The M.D.</a></li>
        </ul>
    </li>
    <li><a href="#" id="webSiteDevelopment" alt="Web Services">Web Services</a> 
        <ul>
          <li><a href="design.htm" id="webSiteDesign">Web Design</a></li>
          <li><a href="hosting.htm" id="webSiteHosting">Web Hosting</a></li>
          <li><a href="domain.htm" id="webSiteDomains">Web Domains</a></li>
          <li><a href="portfolio.htm" id="ourPortFolio">Portfolio</a></li>
        </ul>
    </li>
    <li><a href="#" id="orderYourSite" alt="Order Your Site Online">Ordering</a> 
        <ul>
          <li><a href="place_order.htm" id="placeAnOrder">Place Order</a></li>
          <li><a href="standing_order.htm" id="yourStandingOrder">Standing Order</a></li>
          <li><a href="site_info.htm" id="yourSiteInformation">Site Info</a></li>
        </ul>
    </li>
    <li><a href="#" id="ITtraining" alt="IT Training">IT Training</a> 
        <ul>
          <li><a href="schedule.htm" id="trainingSchedule">Schedules</a></li>
          <li><a href="facilities.htm" id="trainingFacilities">Facilities</a></li>
          <li><a href="onsite.htm" id="onSiteTraining">On Site</a></li>
          <li><a href="courses.htm" id="coursesAvailable">Courses</a></li>
        </ul>
    </li>
	<li><a href="development.htm" id="Development" alt="Software Development">Development</a></li>
	<li><a href="consultancy.htm" id="Consultancy" alt="IT Consultancy">Consultancy</a></li>
    <li class="norepeat"><a href="#" id="careersWithTheCompany" alt="Careers">Careers</a> 
        <ul>
          <li><a href="sales.htm" id="salesCareers">Sales</a></li>
          <li><a href="web.htm" id="webDesignCareers">Web Design </a></li>
        </ul>
    </li>
 </ul>
 </div>
 <div id="content">
<p>Protoman stared at the massive gorge in the ground, and gave a low whistle. It was huge, long, and very, very deep…

…and it hadn’t been here yesterday.

Protoman started walking down the narrow slope, marveling at just how deep it got. Whatever did this had landed fast and hard.

He’d hate to be the one who fell.

Proto looked around again, and saw something interesting buried in the dirt. Squatting down, he picked up a shiny piece of scrap metal, and saw it was bright red. Curious, Protoman continued walking down the slope, and found more and more bits of shiny red metal and thin, sparking wires still connected to small gadgets he recognized from stolen schematics…

This was once Rush.

“Where Rush is, Mega Man is,” said Proto aloud, and walked down into the deepest, widest part of the hole.

There he saw a blue boot buried in the debris.

Protoman swore to himself and started digging. He soon uncovered more and more of what he assumed was Mega—there wasn’t much to base it on. Though the right side of Mega’s body was pretty much intact, the left side looked like it had landed in the trash compacter and gone around for a few rounds. His left arm was half torn off, and his left leg was even worse. The only thing that had saved his head was his helmet, and it was torn in half as well, letting the boy’s brown hair spill wildly over his closed eyes and scratched face.

Protoman simply squatted there for a moment, too shocked to take it all in. By all rights, his brother ought to be…

Dead.

“G…great…” he whispered to himself, still watching the few sparking wires glowing in Mega’s left arm. “He’s destroyed…nothing could…”

I should be happy! he growled to himself. He’s—he won’t—there’s nothing to…

Suddenly, Mega moaned. It was a soft, barely perceptible moan; anyone who wasn’t paying close attention wouldn’t have heard it.

Protoman heard it.

“So…you’re alive. Great…now I can destroy you myself…”

Protoman stared at the face so similar to his own, and the incredible pain it showed.

“I’ll—destroy you properly,” he said, though he knew Mega wouldn’t hear. “It wouldn’t be worth it to hit you when you’re down—I’ll do it in battle, the way it ought to be done.”

He stared at the motionless body once more. Then he carefully gathered Mega Man into his arms, making sure there would be no more damage to the mangled body.

“This is just so I can fight you later, Mega Man. Don’t think I’m going mushy on you—I’m just going to destroy you properly. I’m the only one who’s allowed to, not some stupid fall. Guess that dumb dog of yours broke. Just remember—I am not doing this just because you’re my brother.”

Still holding Mega very, very carefully, Protoman got on his hoverbike and rode to Skull Castle.

</p>
<p>boo./..piugjg</p>
</div>

<div id="newsbyte">
all your side information are belong to us
</div>

<div id="ads">
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
</div>

</div>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Float problems with CSS

Hi Maverick,
Just wondering why the footer is above the content and menu in the source.
Also to make use of the bottom property you would need to position the foot either absolute or relative and not have it floated.

My suggestion would be to have it last in the source.

Hope that helps