Sticky Footer DIV überdeckt darüberliegende DIVs wenn Footer-Inhalt zu viele Zeilen

soezkan

soezkan

Erfahrenes Mitglied
Hallo Alle,

ich habe mir ein Layout gebastelt mit einem Sticky Footer.

Das klappt eigentlich auch. Nur ist jetzt das Problem, wenn ich in diesen Footer mehrere Zeilen setze (z.B. eine vertikale Liste mit Links zur Navigation), dann schiebt sich der Footer über das darüberliegende DIV.

Hier mal der Code in HTML:

HTML: 
<!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"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Meine Seite</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="container-page">
      <div id="container-head">
        <div id="head-left">
        	<a href="#"><img src="images/logo.jpg" alt="Startseite" title="Startseite" /></a>
        </div>
        <div id="head-right">
        	<p><a href="#">Anmelden</a> | <a href="#">Registrieren</a></p>
            <form name="suche">
                <input type="text" name="suchen" class="searchfield" /> <input type="submit" value="Suche" class="submit" />
            </form>
        </div>
      </div>
      <div id="container-navigation">
        <div id="navigation">
        <ul>
        	<li><a href="#">Lorem</a></li>
            <li><a href="#">Sed vitae</a></li>
            <li><a href="#">Suspendisse</a></li>
            <li><a href="#">Donec consequat</a></li>
            <li><a href="#">Pellentesque</a></li>
            <li><a href="#">Nullam</a></li>
            <li><a href="#">Vestibulum</a></li>
        </ul>
        </div>
      </div>
      <div id="container-breadcrumb">
        <div id="breadcrumb">
        <a href="#">Home</a> &gt; <a href="#">Lorem</a> &gt; <a href="#">Donec consequat</a>
        </div>
      </div>
      <div id="container-content">
        <div id="content-left">
        <h1>Resize the window to see the footer move</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In 
        augue. Sed vitae urna feugiat ante faucibus scelerisque. Maecenas non 
        risus vitae velit auctor tincidunt. Ut facilisis elit non metus. Quisque
        ac dolor. <a href="http://www.rodurago.net/index.php?site=details&amp;link=chakra-test">Morbi eget erat in eros</a> rhoncus imperdiet. Aenean egestas 
        lectus ac sapien. Pellentesque non metus ac justo luctus feugiat. Nam 
        elit elit, sagittis vel, eleifend quis, imperdiet non, lorem. Cras vulputate. Aliquam
        sed enim non justo sollicitudin tempor.</p>
        <h2>Donec consequat cursus elit</h2>
        <p>Quisque posuere, massa blandit 
          tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et 
          quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna 
          quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean <a href="http://www.rodurago.net/index.php?site=details&amp;link=chakra-test">volutpat, 
            tellus at faucibus</a> bibendum, sapien massa mattis lorem, id volutpat quam
          odio vitae mauris. Donec laoreet lacinia urna.</p>
        <h2>Donec consequat cursus elit</h2>
        <p>Quisque posuere, massa blandit 
          tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et 
          quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna 
          quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean <a href="http://www.rodurago.net/index.php?site=details&amp;link=chakra-test">volutpat, 
            tellus at faucibus</a> bibendum, sapien massa mattis lorem, id volutpat quam
          odio vitae mauris. Donec laoreet lacinia urna.</p>
        <p>&nbsp;</p>
        <p><a href="http://www.rodurago.net/index.php?site=details&amp;link=chakra-test">http://www.rodurago.net/index.php?site=details&amp;link=chakra-test</a></p>
        </div>
        <div class="content-right">
        <h3>Quisque at quam vel orci</h3>
        <p>Donec laoreet lacinia urna. Integer adipiscing dui 
        nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis 
          <a href="#">volutpat, nibh risus tempus risus</a>, quis lobortis nulla erat nec ipsum. 
        Pellentesque ac est in libero semper hendrerit.</p>
        <h3>Anmeldeformular</h3>
        <p>Donec laoreet lacinia urna. Integer adipiscing dui 
        nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis 
        volutpat, <a href="#">nibh risus tempus</a> risus, </p>
        <p><form name="suche">
                <input type="text" name="suchen" class="searchfield" /> <input type="submit" value="Abschicken" class="submit" />
            </form></p>
        </div>
        <div class="content-right">
        <h3>Quisque at quam vel orci</h3>
        <p>Donec laoreet lacinia urna. Integer adipiscing dui 
        nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis 
        volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum. 
        Pellentesque ac est in libero semper hendrerit.</p>
        <h3>Quisque at quam vel orci</h3>
        <p>Donec laoreet lacinia urna. Integer adipiscing dui 
        nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis 
        volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum. 
        Pellentesque ac est in libero semper hendrerit.</p>
        </div>
      </div>
      <div id="container-footspacer">
        <div id="footspacer">&nbsp;</div>
      </div>
      <div id="container-foot">
        <div id="foot">
	    <div class="column">
            <ul>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Sed vitae</a></li>
                <li><a href="#">Suspendisse</a></li>
                <li><a href="#">Donec consequat</a></li>
                <li><a href="#">Pellentesque</a></li>
                <li><a href="#">Nullam</a></li>
                <li><a href="#">Vestibulum</a></li>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Sed vitae</a></li>
                <li><a href="#">Suspendisse</a></li>
                <li><a href="#">Donec consequat</a></li>
                <li><a href="#">Pellentesque</a></li>
                <li><a href="#">Nullam</a></li>
                <li><a href="#">Vestibulum</a></li>
            </ul>
            </div>
        </div>
      </div>
    </div>
</body>
</html>

und hier die style.css:

HTML: 
@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%; /* Required */
}

body {
	font-family: Lucida Sans, Helvetica, sans-serif;
	background: #F8F4EF;
	background-image: url(../images/bgimage.png);
	background-attachment: fixed;
	background-repeat: repeat-x;
}

#container-page {
	margin: 0 auto;
	width: 1048px;
	padding: 0px;
	background-image: url(../images/background.png);
	text-align: left;
	position: relative;
	min-height: 100%; /* For Modern Browsers */
	height: auto !important; /* For Modern Browsers */
	height: 100%; /* For IE */
}

#container-head {
	background: #732413;
	width: 1000px;
	height: 117px;
	min-height: 117px;
	margin: 0px 24px 0px 24px;
	padding: 0px 0px 0px 0px;
}

#head-left {
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#head-left img {
	border: 0;
}

#head-right {
	float: right;
	font-size: 12px;
	color: #B8756B;
	margin: 25px 24px 0px 24px;
	padding: 0px 0px 0px 0px;
}

#head-right p {
	text-align: right;
	padding: 0px 0px 10px 0px;
}

#head-right p a {
	color: #ffffff;
	text-decoration: none;
}

#head-right p a:hover {
	border-bottom: 1px solid #ffffff;
}

#head-right input.searchfield {
	background-image: url(../images/inputbg.png);
	border: none;
	height: 18px;
	min-height: 18px;
	color: #041B2E;
	font-size: 12px;
	margin: 0 0 0 0;
	padding: 2px 3px 0 3px;
}

#head-right input.submit {
	border: 1px solid #041B2E;
	background-color: #008268;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 0 0;
	padding: 2px 7px 2px 7px;
}

#container-navigation {
	background: #041B2E;
	width: 1000px;
	height: 34px;
	min-height: 34px;
	margin: 0px 24px 0px 24px;
	padding: 0px 0px 0px 0px;
}

#navigation ul {
	list-style: none;
	margin: 0px 20px 0px 21px;
	padding: 8px 0px 0px 0px;
}

#navigation ul li {
	float: left;
	font-size: 14px;
	color: #ffffff;
	margin: 0px 0px 0px 0px;
	padding: 0px 39px 0px 0px;
}

#navigation ul li a {
	color: #ffffff;
	text-decoration: none;
}

#navigation ul li a:hover {
	border-bottom: 1px solid #ffffff;
}

#container-breadcrumb {
	background: #F5F0EE;
	width: 1000px;
	height: 25px;
	min-height: 25px;
	border-bottom: 1px solid #9D6559;
	margin: 0px 24px 0px 24px;
	padding: 0px 0px 0px 0px;
}

#breadcrumb {
	font-size: 12px;
	color: #732413;
	margin: 0px 0px 0px 21px;
	padding: 6px 0px 0px 0px;
}

#breadcrumb a {
	color: #732413;
	text-decoration: none;
}

#breadcrumb a:hover {
	border-bottom: 1px solid #732413;
}


#container-content {
	margin: 0px 24px 0px 24px;
	padding: 20px 0 0 0;
}

#container-content:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

#content-left {
	font-family: Lucida Sans, Helvetica, sans-serif;
	font-size: 14px;
	color: #041B2E;
	float: left;
	margin: 0 12px 0 20px;
	padding: 0px 0 25px 0;
	width: 656px;
}

#content-left p a {
	color: #009D7D;
	text-decoration: none;
}

#content-left p a:hover {
	border-bottom: 1px dotted #041B2E;
}

#content-left h1 {
	font-size: 18px;
	margin: 0 0 0 0;
	padding: 0 0 16px 0;
}

#content-left h2 {
	font-size: 15px;
	margin: 0 0 0 0;
	padding: 20px 0 16px 0;
}

.content-right {
	font-family: Lucida Sans, Helvetica, sans-serif;
	font-size: 12px;
	color: #041B2E;
	float: right;
	margin: 0px 20px 20px 12px;
	padding: 20px 20px 0 20px;
	width: 238px;
	background-color: #F5F0EE;
	border: 1px solid #E3D6D0;
}

.content-right h3 {
	font-size: 13px;
	margin: 0 0 0 0;
	padding: 0 0 16px 0;
}

.content-right p {
	font-size: 12px;
	margin: 0 0 0 0;
	padding: 0 0 16px 0;
}

.content-right a {
	color: #962710;
	text-decoration: none;
}

.content-right a:hover {
	border-bottom: 1px dotted #041B2E;
}

.content-right input.searchfield {
	background-image: url(../images/inputbgc.png);
	border: 1px solid #D6C4BC;
	height: 18px;
	min-height: 18px;
	color: #041B2E;
	font-size: 12px;
	margin: 0 0 0 0;
	padding: 1px 3px 0 3px;
}

.content-right input.submit {
	border: 1px solid #E3D6D0;
	background-color: #008268;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 0 0;
	padding: 2px 7px 2px 7px;
}

#container-footspacer {
	width: 1000px;
	height: 25px;
	min-height: 25px;
	margin: 0px 24px 0px 24px;
	padding: 30px 0px 0px 0px;

}

#footspacer {

}

#container-foot {
	width: 1000px;
	margin: 0px 24px 0px 24px;
	padding: 0px 0px 20px 0px;
	background: #156454;
	position: absolute;
	bottom: 0 !important;
	bottom: -1px; /* For Certain IE widths */
}

#foot {
	font-family: Lucida Sans, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
    position: relative;
	margin: 0 auto 0 auto;
	padding: 20px 20px 20px 20px;
	width: 960px;
}

#foot .column {
	float: left;
	margin: 0 0 0 0;
	padding: 0px 5px 0px 5px;
	width: 137px;
}

#foot .column ul {
	list-style: none;
}

#foot .column ul li {
	padding: 0 0 3px 0;
}

#foot .column ul a {
	text-decoration: none;
	color: #FFFFFF;
}

#foot .column ul a:hover {
	text-decoration: underline;
}

Wie kann ich das machen, dass die darüber liegenden DIVs automatisch mit Anwachsen der Footer-DIV-Höhe nach oben geschoben werden?

Ganz lieben Dank schonmal für Hilfe!
Soezkan
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück