Help ! How can have something to remain in the bottom even if the content expands?

Discussion in 'HTML & Website Design' started by HDaddy, May 17, 2008.

0
  1. #1
    Hi!

    Check the link to see what i mean. http://koti.mbnet.fi/thinner/site/scrshot.jpg

    So i want the company info to stay in the bottom even when the content expands and expands. I had the info part at the bottom earlier but when i tested
    with lots of content it stayed behind and was left in the middle. So can i achieve what i want and how?

    
body {
	background: #fff;
	margin:0;
	}

.clear {
	clear:both;
	}
	
h1 {
	margin: 0;
	padding-top: 7px;
	padding-left: 10px;
	color: #184889;
	font: normal 0.9em arial;
	}
	
.kuvat {
	margin-left: 10px;
	margin-bottom: 10px;
	width: 440px;
	border: 1px solid #746D71;
	}

#container	{		
	background: transparent;
	margin: 0 auto;
	width: 770px;
		
}

#containerbg {
	background: url(kuvat/containerbg.jpg) repeat-y;
	width: 770px;
	margin: 0;
	}

#header {
	background:url(kuvat/header2.jpg) no-repeat;
	margin: 0;
	width: 770px;
	height: 307px;
	}

/* navigation*/
	
#navi {
    width: 734px; height: 52px;
    background: url(kuvat/navi2.gif);
    margin-left: 19px  ; padding: 0;
    position: relative;}
#navi ul {
margin:0;}
  #navi li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #navi li, #navi a {
    height: 52px; display: block;}
	
	#index {left: 0; width: 75px;}
	#historia {left: 78px; width: 75px;}
	#palvelut {left: 155px; width: 72px;}
	#referenssit {left: 230px; width: 93px;}
	#kuvat {left: 325px; width: 57px;}
	#yhteys {left: 384px; width: 102px;}
  
  
  #index a:hover {
    background: transparent url(kuvat/navi2.gif)
   0px -52px no-repeat;}
   #historia a:hover {
    background: transparent url(kuvat/navi2.gif)
	-78px -52px no-repeat;}
   #palvelut a:hover {
    background: transparent url(kuvat/navi2.gif)
   -155px -52px no-repeat;}
   #referenssit a:hover {
    background: transparent url(kuvat/navi2.gif)
	-230px -52px no-repeat;}
   #kuvat a:hover {
    background: transparent url(kuvat/navi2.gif)
   -325px -52px no-repeat;}
   #yhteys a:hover {
    background: transparent url(kuvat/navi2.gif)
   -384px -52px no-repeat;}
   
#content {
	float:right;
	position:relative;
	right:15px;
	background:transparent;
	width: 471px;
	min-height:300px;
	height:auto !important;
	height:300px;
	}
	
.box{
	margin: 0 0 0 19px;
	background:transparent;
	width: 240px;
	font: normal 0.55em Verdana, "Trebuchet MS";
	color: #746D71;
	line-height: 13px;
	padding: 5px;
	
	}
	
 p {
	margin: 0;
	padding: 10px;
	font: normal 0.75em Verdana, "Trebuchet MS";
	color: #000;
	line-height:17px;
	}

	
#footer {
	background: url(kuvat/footer.jpg) no-repeat;
	width: 770px;
	height: 63px;
	margin:0;
	font: normal 0.7em Verdana, "Trebuchet MS";
	color: #fff;
	}
	
.vasen {
float:left;
margin:0;
padding-top:25px;
padding-left:25px;
}

.oikea {
float:right;
margin:0;
padding-top:25px;
padding-right:25px;
}

.oikea a {
text-decoration:none;
color:#fff;
}

.oikea a:hover {
text-decoration:underline;
color:#fff;
}
    Code (markup):
    
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content="pienkoneurakointi, kaivuutyöt, hiekkapuhallusta, timanttiporausta, teollisuustyöt, piikkaukset, viemärisaneeraukset"/>
<link rel="stylesheet" type="text/css" href="lehtinen.css" media="screen"/>
<title>PIENKONEURAKOINTI LEHTINEN AY - Kaivuutyöt, hiekkapuhallusta, timanttiporausta, teollisuustyöt, piikkaukset</title>
</head>
<body>
<div id="container"/>	 
<div id="header">
<div id="navi">
	<ul>
	<li id="index"><a href="index.html"></a></li>
    <li id="historia"><a href="historia.html"></a></li>
    <li id="palvelut"><a href="palvelut.html"></a></li>
    <li id="referenssit"><a href="referenssit.html"></a></li>
	<li id="kuvat"><a href="kuvat.html"></a></li>
	<li id="yhteys"><a href="yhteys.html"></a></li>
  </ul>
	</div>	
</div>
<div id="containerbg">
<div id="content">
<h1>Tervetuloa !</h1>
<p>
Sivuiltamme löydät tietoa yrityksestämme ja historiastamme.
Referensseissä voit tutustua töihimme joita olemme tehneet aiemmin.
</p>

<p>
Palvelut osiosta löydät täydellisen kuvauksen palveluistamme.
</p>

<img class="kuvat" src="kuvat/index.jpg" alt="Pienkoneurakointi Lehtinen Ay"/>

</div>
<div class="box">
<strong>Yhteystiedot</strong><br/>
Pienkoneurakointi Lehtinen Ay<br/> 	
Pihlajatie 11<br/> 
67200 KOKKOLA<br/> 
Jari Lehtinen Gsm. 040- 577 7781<br/>
Ari Lehtinen Gsm. 040- 830 9307<br/>
Y-tunnus: 1831000-7
   </div>
<div class="clear">
</div>
<div id="footer">
<span class="vasen">© PIENKONEURAKOINTI LEHTINEN AY 2008</span>
<span class="oikea">Design:<a href="mailto:henry.kiviaho@gmail.com">HDaddy</a></span>
</div>
</div>	

</body>

</html>
    HTML:
    Please help me on this one !

    Thanks in advance.
     
    HDaddy, May 17, 2008 IP
  2. Ulquiorra

    Ulquiorra Peon

    Messages:
    422
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Need more details on what you want to happen.

    Also, a live url will be helpful (if possible).
     
    Ulquiorra, May 18, 2008 IP