Supportnet / Forum / Webseiten/HTML
CSS - Positionierung
Frage
Nach einigen gelösten Problemen stoße ich auch immer wieder auf neue. So möchte ich nun zwei DIV-Elemente nebeneinander darstellen. Das alleine klappt auch wunderbar. Wenn allerdings diese beiden Elemente in einem umgebenden "Elternelement" angezeigt werden sollen, wird nur das linke DIV in diesem Element angezeigt, das rechte DIV seltsamerweise darüber.
Hier der dazugehörige CSS-Code:
[code].content_bg {
position: relative;
top: 100px;
margin: 0 auto;
background-color: #EFEFEF;
}
.content {
float: left;
margin-left: 35px;
width: 600px;
background-color: #FFFFFF;
padding: 10px;
padding-bottom: 30px;
border: solid 1px;
}
.content_main {
margin-left: 70px;
margin-right: 80px;
text-align: justify;
border: solid 1px;
}[/code]
Und hier der HTML-Code:
[code]<div class="content_bg">
<div class="content">
content
<div class="content_main">
content_main
</div>
</div>
<div class="box">
box
</div>
</div>[/code]
Das obere und untere DIV gehören zum umschließenden Elemen
Antwort 1 von sutadur
Inzwischen habe nach einigem Probieren eine Lösung gefunden, die zumindest im Opera und Firefox zum gewünschten Ergebnis führt.
CSS:
HTML:
Aber: Bei der Anzeige mit dem IE fehlt das Element "Box" komplett. Wieso?
CSS:
.content_bg {
position: relative;
top: 100px;
margin: 0 auto;
background-color: #EFEFEF;
}
.content {
margin-left: 35px;
width: 600px;
background-color: #FFFFFF;
border: solid 1px;
}
.content_main {
margin-left: 70px;
margin-right: 80px;
text-align: justify;
border: solid 1px;
}
.box {
position: absolute;
left: 640px;
bottom: 0px;
border: 1px solid;
width: 135px;
height: 10px;
}HTML:
<div class="content_bg">
content_bg
<div class="content">
content
<div class="content_main">
content_main
</div>
</div>
<div class="box">
box
</div>
</div>Aber: Bei der Anzeige mit dem IE fehlt das Element "Box" komplett. Wieso?
Antwort 2 von Nicolas
Der IE interpretiert das
bottom: 0px; in .box (in zusammenhang mit der absoluten Positionierung) falsch.
1. es wird komischerweise nicht die untere Kante der umgebenden div box als verankerung genommen, sondern die untere Bildschirmkante.
2. Als wäre das nicht schon blöd genug Sieht es nun auch noch so aus als ob die Verankerung nochmal 100px weiter runter rutscht, da die umgebende div box ja 100px runter geschoben worden ist.
beides ist meiner Meinung nach völlig Sinnfrei, da Die Ausrichtung zum umgebenden Element und nicht zum Fenster gemacht werden muss (CSS2.1 "9.6 Absolute positioning")
bottom: 0px; in .box (in zusammenhang mit der absoluten Positionierung) falsch.
1. es wird komischerweise nicht die untere Kante der umgebenden div box als verankerung genommen, sondern die untere Bildschirmkante.
2. Als wäre das nicht schon blöd genug Sieht es nun auch noch so aus als ob die Verankerung nochmal 100px weiter runter rutscht, da die umgebende div box ja 100px runter geschoben worden ist.
beides ist meiner Meinung nach völlig Sinnfrei, da Die Ausrichtung zum umgebenden Element und nicht zum Fenster gemacht werden muss (CSS2.1 "9.6 Absolute positioning")