PDA

Click to See Complete Forum and Search --> : can't place footer

jagguy
07-07-2007, 09:35 AM
Hi,

I can't insert a footer using a div id at bottom of the page. The page length is unknown and i want to just fit it in under the last thing printed.

I have a nav bar to the left and heading. The main content area has items floated to the right. I have standard 3 main areas beofre the footer.

I add a footer and it appears as part of the main content area to the left on the same line as main content area.

The footer appears to the left of this but it isnt in the div.
div#contentinfo {
position:relative;
top:10px; /*border adds 2 px so i take them off*/
left: 10px;
width:150px;
height:220px;
z-index:2;
border:3px groove #666862;
float:right;
margin-right:30px;
// background: white;
background-image: url('camback.jpg') ;
}

last thing I add is
</div> <br><br>
<div id="footer">
asdsa
</div>
</body>
</html>
ray326
07-07-2007, 09:57 AM
Well you've got both a position and a float in the contentinfo and there's no indication the footer has a clear:both on it. Post a link.
WebJoel
07-07-2007, 12:49 PM
You can also reduce this:

background: white;
background-image: url('camback.jpg') ;

to just:

background: white url('camback.jpg') ;


saves some typing, easier to read/edit later, smaller code. :)
jagguy
07-07-2007, 07:20 PM
I can't get a footer after at bottom of the page. The problem is my maincontent area is dynamic in size although i have edited this out.
The footer appears to the left of maincontent and not at bottom.


...
div#headerWrapper {
position:absolute;
top:5px;
left: 5px;
background: #63625e ;
width:1000px;
height:120px;
top:3px;
left: 5px;
border:2px groove black;
}

div#header {
position:relative;
top:5px;
left: 5px;
width:990px;
height:100px;
background: black;

border:5px groove #63625e ;
}




div#boxlayer1 {
position:absolute;
width:145px;
height:700px;
z-index:1;
left: 5px;
top: 125px;
border:2px groove black;
// background: green;
background-color:#63625e;
}

div#content1 {
position:absolute;
top:125px; /*border adds 2 px so i take them off*/
left: 165px;
width:850px;
height:900px;
z-index:1;
border:5px groove #666862;

background: black;

}

#footer {

clear:both;
float:none;
width:200px;
height:100px;
background: red;

border:5px groove #63625e ;

}
.....

</head>

<body bgcolor="#666862"> <?php include("navigation2.php"); ?>
<div id="navlist">
<div id="headnavlist">Site Features</div>
<ul >
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li ><a href='login.php'>Send Mesage</a></li>

<li><a href='home.php'>Message Outbox</a></li>
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>


<li><a href='home.php'>Message Outbox</a></li>
</ul>
</div>
</div>

<div id="content1" >
asfafas

</div> <br><br>
<div id="footer">
asdsa
</div>
</body>
</html>
WebJoel
07-09-2007, 10:33 AM
Could we see your complete code (HTML & CSS)? Using your provided sample, I could reconstruct what I think you have, -but if it isn't, the advice may not apply.

Also, -the white-space inside of the tag might not be such a good thing:

<ul >
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li ><a href='login.php'>Send Mesage</a></li>

<li><a href='home.php'>Message Outbox</a></li>
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>

<li><a href='home.php'>Message Outbox</a></li>
</ul> Doesn't seem to harm anything, but 'white-space bug on lists' for IE might cause a problem later on..
ray326
07-09-2007, 03:04 PM
The absolute positioning is just adding to your woes, too. Try to rebuild it with floats.