On my website, to my dismay the content div runs below the footer div; additionally, the footer div positions itself not below the tallest (and thus reaching farthest down) div, but below the quite short navigation side column. When I position the footer div absolutely, the content div overruns the wrapper div. If I leave it as is, the content stays inside the wrapper div but overruns the footer div. I've tried a number of different changes but they all reveal how little I understand positioning in css. Can anyone explain any of: (1) the content div overruns the wrapper div when the footer div's positioning is changed to absolute; (2) why the footer div doesn't position itself below the content div; and (3) how to fix these problems.
Thanks for any and all help!
Below is my stylesheet and a sample webpage with the problem
- Code: Select all
/***STYLE SHEET*/
html {}
body {
background: #FFCCFF; /*url(background/111b.jpg)*/
vlink: #660066;
margin: 0;
border: 0;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font: 1em/1.6 Helvetica, sans-serif;
text-align: center;
height: 100%;
overflow: none;
}
/*
* Main Structure to keep it narrow and straight
*/
#wrapper {
width: 800px;
margin: 10px auto;
background: white;
border: thin solid #c9f;
border-width: 0 0 5px 0;
text-align: left;
z-index: 1;
background: #fff url(*image/ice.jpg) top center repeat-y;
overflow: none;
}
/*
*
*HEADER
*/
#header {
height: 70px;
length: 100%;
background: white;
text-align: center;
border: thin solid #c9f; /*or: #000033*/
}
#masthead {
margin: 0 auto;
padding: 5px;
margin: 5px;
height: 70%;
border: thin solid white;
}
/*
*HEADERNAVBAR
*/
#headernavbar {
margin: 0 0 0 5px;
padding: 0;
clear: both;
border-top: 1px white black;
list-style: none inside;
}
#headernavbar li {
float: left;
width: 146px;
margin: 0 0 0 0;
background: white;
border: solid #c9f thin;
border-width: 0 0 1px 0;
display: inline;
text-align: center;
}
#pathbar{
position: relative;
width: 96%;
margin: 0 0 0 0;
padding: 5px 0 5px 20px;
height: 25px;
border-bottom: thin solid #c9f;
text-align: center;
}
.path {
color: blue;
font-size: .8em;
}
.pathtitle {
color: #333399;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
}
h1.sitetitle {
margin: -5px 0 -10px 0;
font-family: Helvetica, sans-serif;
font-size: 1.5em;
}
/*
*
*MAIN CONTENT
*/
#main {
z-index: 1;
height: 100%;
width: 100%;
border: thin solid #c9f;
border-width: 2px 1px 1px 1px;
}
#content {
float: left;
z-index: 2;
margin: 0 0 0 5px;
padding: 5px;
text-align: justify;
width: 580px;
border: thin solid green;
overflow: none;
}
#content p {
text-indent: 40px;
padding: 5px;
}
#contitle {
z-index: 1;
position: relative;
text-align: center;
}
h1.contitle {
font: 1em;
color: #669999;
align: left;
margin: 30px;
}
hr.contitlebartop {
width: 100%;
background-color: #c9f;
height: 5px;
}
hr.contitlebar {
align: left;
width: 100%;
background-color: #c9f;
height: 5px;
margin-top: -30px;
}
hr.pathseparation {
}
/*
*
*NAVIGATION SIDE COLUMN
*/
#navigation {
margin: 0 0 0 600px;
height: 100%;
width: 185px;
border: thin solid #c9f;
border-width: 0 0 0 1px;
text-align: center;
}
#tkwface {
margin: 5px;
border: thin solid white;
}
h2.tkwface {
font: Helvetica, san-serif;
text-weight: bold;
}
#mainlimbsinnerline {
padding: 0 0 0 5px;
margin: 1px;
border: thin solid grey;
border-width: 0 0 0 1px;
}
.mainlimbtitle {
color: #6666CC;
font: bold 1.2em Arial,sans-serif;
}
.mainlimbline {
width: 115px;
margin: 5px 0 0 -5px;
color: grey noshade;
}
#mainlimbs {
position: relative;
padding: 20px;
border: thin solid white;
margin: 5px;
text-align: left;
}
p.mainlimbs {
font: 1em/1.5 Georgia, serif;
display: block;
}
ul,li {
font-family: Verdana;
font-size: 1em;
color: black;
align: justify;
}
.caution {font-family: Verdana; font-size: 1em; color: purple; }
strong {}
b {
font-size:
1.1em;
}
img {
hspace: 100px;
vspace: 100px;
}
a img {
border: 0;
}
<!--CLASSES-->
.white {
background: white;
width: 100%;
height: 2px;
}
hr.bigblue {
width: 100%;
background: #03C;
height: 5px;
}
/*
*
*END OF CONTENT
*/
#footernavbar
{
margin: 0;
padding: 5px;
border: black thin solid;
}
#footernavbar li {
width: 100px;
margin: 0 0 0 150px;
display: inline;
text-align: center;
}
And here's the webpage...
- Code: Select all
<!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-->
<meta name="author" content="Matthew Laufe Scheer"/>
<meta name="copyright" content="Matthew Laufe Scheer 2008"/>
<meta name="description" content="Matthew Laufe Scheer's Hub for: Victor Shklovsky, The Byzantine Empire, Child Labor Law Reform, my blog, and more..."/>
<!--LINK TO STYLESHEETS-->
<link rel="stylesheet" type="text/css" href="../mystyles.css"/>
<!--LINK TO JAVASCRIPT SHEET-->
<script type="text/javascript" src="jsmethods.js"></script>
<link rel="shortcut icon" type="image/ico" href="/favicon8.ico" />
<title>Matthew Laufe Scheer's Index</title>
</head>
<body onLoad="window.defaultStatus='Welcome to Three Key Words'">
<a name="top"></a>
<div id="wrapper">
<div id="header">
<div id="masthead">
<h1 class="sitetitle"><a href="/" title="Back to Homepage" class="headtitle">Three Key Words</a></h1>
</div>
</div>
<!-- **BELOW HEADER NAVIGATIONAL BAR -->
<div id="headernavbar1">
</div>
<div id="main">
<ul id="headernavbar">
<li><a href="/fullindex/" class="nav1">Full Index</a></li>
<li><a href="/about/" class="nav1">About</a></li>
<li><a href="/contact/" class="nav1">Contact</a></li>
<li style="margin-right: 0px"><a href="/updates/" class="nav1">Updates</a></li>
</ul>
<div id="content">
<div id="pathbar">
<span class="path"><span class="pathtitle">Path</span> // <a href="http://www.threekeywords.com/">www.threekeywords.com</a> > HOME</span></div>
<div id="contitle"><h1 class="contitle">
Explore</h1>
<hr class="contitlebar"/></div>
<!-- CONTENT START -->
<p>Orhan Pamuk wrote a book called <i>The Black Book</i>. In it three writers give advice to a younger writer, much like the witches advised Macbeth before, eventually, he gets his head chopped off. “Start collecting proverbs, sayings, anecdotes, jokes, aphorisms, lines of poetry, and poetry anthologies.” Of their advice it's the most prosaic, with no standard for collecting, as if saying, just remember what people tell you. Some remember by collecting notebooks of memories.</p>
<p>
“On the subject of personal style: the apprentice writer always begins by imitating those who came before him. This is born of necessity. Do not children also learn to speak by imitating others?”</p> —Tahir-ul Mevlevi, as quoted in <i>The Black Book</i> by Orhan Pamuk
<h4 class="quotespacing"/><a href="/lionelltrilling.html" style="text-decoration: none">Lionell Trilling</a>
<h4 class="quotespacing"/><a href="/shklovsky.html" style="text-decoration: none">Victor Shklovsky</a>
<h4 class="quotespacing"/><a href="/Ccampbell-Bannerman.html" style="text-decoration: none">Sir Henry Cambpell Bannerman</a>
<h4 class="quotespacing"/><a href="/selectdictionaryentries.html" style="text-decoration: none">Select Dictionary.com Entries</a>
<!-- CONTENT END -->
</div>
<div id="navigation">
<div id="tkwface">
<h2 class="tkwface">
<a href="www.threekeywords.com" class="tkw" title="Back Home"><img src="sadface.jpg" alt="home"></a>
</h2>
</div>
<div id="mainlimbs">
<div id="mainlimbsinnerline">
<strong class="mainlimbtitle">Explore</strong>
<hr class="mainlimbline"/>
<p class="mainlimbs"><strong>
<a href="/tkwblog" class="mainlim">Blog</a>
<a href="/" class="mainlim">Neighborhood Organizing</a>
<br/>
<a href="" class="mainlim">Shklovsky</a>
<!--<br/>
<a href="" class="mainlim"></a>
<br/>
<a href="" class="mainlim">Audio</a>
<br/>
<a href="" class="mainlim">Byzantium</a>
<br/>
<a href="" class="mainlim">CLL</a>
<br/>
<a href="" class="mainlim">Poetry</a>--!>
<br/>
<a href="/quotes" class="mainlim">Quotes</a>
<br/>
<a href="" class="mainlim">War on Outerspace</a>
</strong>
</p>
</div>
</div>
</div>
<ul id="footernavbar">
<li><a href="www.threekeywords.com" title="Back home for more!" class="footer1">TKW</a></li>
<li><a href="" title="" class="footer1" style="text-align: center">MAINFOLDER</a></li>
<li><a href="#top" class="footer1" style="text-align: right">Top</a></li>
</ul>
</div>
</div>
<!--FINITO-->
</body>
</html>
