nicht angemeldet
Höhe von zwei Div-Bereichen
Hallo,
ich hab ein Problem mit CSS.
Bitte nicht böse sein, aber ich bin ziemlicher Anfänger;-)
Ich habe schon versucht bei Google zu suchen, finde aber nichts Passendes.
Zu meinem Problem:
Ich habe einen äußeren Div-Bereich mit einer festen Breite und einer variablen Höhe.
In diesem Bereich ist ein zweiter Div-Bereich, der auch eine feste Breite hat und mittels "top:20px" 20px nach unten verschoben wurde.
Aber warum wird die Höhe des äußeren Div-Bereiches nicht daran angepasst?
Ich kann diesem auch keine feste Höhe zuweisen, weil sich der Inhalt des inneren Bereich später andern kann und die Höhe somit mitwachsen soll.
Hier mal der Code:
man sieht das die grüne Box über den roten Rahmen reicht und dieser nicht an die Verschiebung der grünen Box angepasst ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Index</title>
<style type="text/css">
.frame{
border: 1px solid red;
background-color:white;
position:relative;
width:100px;
height:auto;
}
.innen{
background-color:green;
position:relative;
top:20px;
left:0px;
width:30px;
}
</style>
</head>
<body>
<div class="frame">
<div class="innen">Test<br><br>Test</div>
</div>
</body>
</html>
Vielen Dank
Helge
-
Hi,
Ich habe einen äußeren Div-Bereich mit einer festen Breite und einer variablen Höhe.
In diesem Bereich ist ein zweiter Div-Bereich, der auch eine feste Breite hat und mittels "top:20px" 20px nach unten verschoben wurde.Aber warum wird die Höhe des äußeren Div-Bereiches nicht daran angepasst?
Weil es keinen Grund dazu gibt.
.innen{
position:relative;
top:20px;Relative Positionierung verschiebt ein Element gegenüber seiner Normalposition, und belässt dabei den Platz, den das Element ursprünglich eingenommen hätte, reserviert.
Wenn du lediglich einen Aussenabstand des inneren Elementes nach oben hin haben willst, dann nimm die dafür vorgesehene Eigenschaft: margin-top
(Vorsicht, auch deren Auswirkungen können anders sein, als du es vielleicht erwartest - Stichwort collapsing margins bzw. exakter adjoining margins, nachzulesen hier: http://www.w3.org/TR/CSS21/box.html#collapsing-margins.)Oder du gibst stattdessen dem äusseren Element einen Innenabstand oben.
Was genau am zielführendsten ist, kommt darauf an, was genau du erreichen möchtest.MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam] -
Moin Helge,
die Befehle "left" und "top" sind im Grunde genau dafür da sich nicht auf das äußere Element (in deinem Fall der div-Container) zu beziehen. Mit diesen Befehelen kannst du z.B. relasieren, dass zwei div-Container übereinander liegen.
Der Befehl, welchen du suchst ist top-margin.top-margin:20px statt top:20px einsetzen und es müsste funktionieren.
Grüße, Hauke