fabian: div in rechter Sidebar immer ganz unten

Beitrag lesen

SELF-Forum

div in rechter Sidebar immer ganz unten

fabian
– Informationen zu den Bewertungsregeln

Hallo

Bin schon länger an diesem Problem und langsam am Verzweifeln. Ich habe drei Spalten nebeneinander. Nun soll in der dritten Spalte, ein div immer ganz unten am Rand positioniert werden. Jedoch kann ich dem übergeordneten div keine Höhe wie 100% zuweisen. Ich habe das div auch schon außerhalb der 3 Spalten Platziert, also direkt über der Fußzeile, jedoch ist dann das Problem, dass der Inhalt nicht neben dem div stehen kann.
Zusätzlich habe ich eine Fußzeile welche immer am unteren Rand klebt.

Das div soll rechts direkt über der Fußzeile stehen. Der Inhalt der Mittleren Spalte soll daneben stehen können.

Über Lösungsvorschläge bin ich sehr dankbar
Gruss Fabian

Hier mein HTML:

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html  
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE">  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <link href="css/test.css" rel="stylesheet" type="text/css" />  
	<title>Demo</title>  
</head>  
<body>  
 <div id="rahmen">  
  <div id="kopf">  
	Kopf  
  </div>  
  <div id="seite">  
   <div id="links">  
	Spalte links  
   </div>  
   <div id="inhalt">  
	Inhalt  
   </div>  
   <div id="rechts">  
<div id="container">  
    <div id="posts">  
	Spalte Rechts  
    </div>  
<div id="box">  
	Box unten  
</div>  
</div>  
   </div>  
   <div class="clear"></div>  
  </div>  
  <div id="fuss">  
	Fusszeile  
  </div>  
 </div>  
</body>  
</html>

Hier das CSS dazu:

html, body {  
	margin: 0;  
	padding: 0;  
	height: 100%;  
}  
  
#rahmen {  
	margin: 0px auto;  
	width: 720px;  
	background: red;  
	min-height: 100%;  
	height:auto !important;  
	height:100%;  
}  
  
#kopf {  
	background: green;  
	height: 140px;  
}  
  
#links {  
	background: purple;  
	width: 130px;  
	float: left;  
}  
  
#inhalt {  
	background: yellow;  
	width: 425px;  
	float: left;  
}  
  
#rechts {  
	background: lime;  
	width: 165px;  
	float: right;  
}  
  
#posts {  
	background: blue;  
}  
  
.clear {  
	clear: both;  
}  
  
#fuss {  
	background: aqua;  
	height: 40px;  
	position: absolute;  
	bottom: 0px;  
	width: 720px;  
}  
  
#seite {  
	position: relative;  
	background: orange;  
}  
  
#box {  
	background: indigo;  
	height: 200px;  
	width: 165px;  
	bottom: 0px;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln