nicht angemeldet
div in rechter Sidebar immer ganz unten
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;
}
-
Hi!
Richte "box" doch an der Fusszeile (absolut) aus. Also: box in die Fusszeile und dann absolut positionieren. right: 0 und top - x (so hoch du halt moechtest)
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Hi!
Richte "box" doch an der Fusszeile (absolut) aus. Also: box in die Fusszeile und dann absolut positionieren. right: 0 und top - x (so hoch du halt moechtest)
Hallo!
Vielen Dank für deine Antwort.
Habe jetzt die Box an der Fusszeile ausgerichtet. Das Klappt soweit ganz gut.
Im CSS habe ich jetzt.
background: indigo; height: 200px; width: 165px; top: -200px; right: 0px; position: absolute;Jedoch habe ich jetzt noch das Problem mit der Fusszeile. Ist der Inhalt kleiner als 1 Seite, muss ich mit position: absolute arbeiten. Geht der Inhalt über die Seite hinaus, muss ich ein position: relative setzen. Wie kann ich das noch hinkriegen, damit es einheitlich ist?
-
Hi,
Jedoch habe ich jetzt noch das Problem mit der Fusszeile. Ist der Inhalt kleiner als 1 Seite, muss ich mit position: absolute arbeiten. Geht der Inhalt über die Seite hinaus, muss ich ein position: relative setzen. Wie kann ich das noch hinkriegen, damit es einheitlich ist?
Sorge dafür, dass sich die absolute Positionierung nicht nach dem Viewport richtet, sondern nach dem umgebenden Container.
SEFLHTML verrat, wie.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-