...

View Full Version : Footer in a wrong location



Kaja
02-06-2012, 09:51 PM
This is a very basic layout that worked fine until I started using position relative and absolute.
Now footer info is displaying on the very top of my page and I don't know how to get it to the bottom where it belongs.

Here is the code,
Thanks


<body>
<div id="wrapper">

<div id="header">
<h1>TEXT </h1>
</div> <!-- header -->

<div id="image">
<img src="lake-3.jpg" width="535" height="250" alt= "winter"/>
</div> <!-- image -->

<div id="container">

<div id="sidebar">
<ul class="nav">
<li id="current"><a href="index.html"> Home</a></li>
<li><a href="profile.html"> Profile</a></li>
</ul>
</div> <!-- sidebar -->

<div id="main">
<h2><br />TEXT</h2>
<p>
MORE TEXT<br /><br />
</p>
</div> <!-- main-->
</div> <!-- container -->

<div id="footer">
<p>&copy; COPYRIGHT &nbsp;&nbsp;
</p>
</div><!-- footer -->

</div> <!-- wrapper -->

</body>



body {
font-family: Arial;
background-color: #9f987b;
margin: 0;
padding: 0;
}
p {
margin: 1ex 1em;
}
h3 {
margin:0;
padding:0;
}

#wrapper {
position: relative;
width: 800px;
margin-right: auto;
margin-left: auto;
}

#header {
background-color: #2c235f;
width: 265px;
height: 250px;
position: absolute;
top: 0;
left: 0;
}

h1 {
color: #fff;
text-align: center;
padding: 50px 0 0 0;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
#image {
width: 535px;
height: 250px;
position: absolute;
top: 0;
left: 265px;

}

#container {
overflow: hidden;
zoom: 1;
background-color: #726c93;
position: absolute;
top: 250px;
left: 0;
}

#sidebar {
float: left;
width: 225px;
}

ul.nav {
margin: 0;
padding: 40px 0 ;
}

ul.nav li {
padding: 0 10px 4px 10px;
margin: 0;
list-style: none
}

ul.nav a {
display: block;
width: 205px;
height: 25px;
line-height: 25px;
background-color:#eadfb5;
text-decoration: none;
color: #000;
padding-left: 5px }

#current a{
background-color: #8a7830;
}

ul.nav a:hover {
background-color: #d4c794;
}

#main {
float: right;
width: 575px;
}

#main p {
color: black;
line-height: 125%;
margin: 1ex 0;
padding: 0 30px;
text-align: justify;
}


/* ===== footer ===== */

#footer {
clear: both;
background: transparent;
margin: 0 auto;
padding: 5px;
}

#footer p {
font-family: Geneva, sans-serif;
font-size: .75em;
color: black;
margin: 0;
padding: 0;
text-align: center;
}

Kaja
02-06-2012, 11:37 PM
Sorry allroundnews but nothing has changed...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum