✔ DIV-Container soll sich automatisch anpassen

Status
Nicht offen für weitere Antworten.
S

Stelo

Erfahrenes Mitglied
Also, das wird jetzt wohl etwas schwierig zu erklären.
Ich habe ein DIV-LayOut, dabei bildet ein DIV-Container eine Art Hintergrund und darin/darauf sind dann noch mehrere kleine div-Container.
Der Code dazu sieht ungefährt so aus:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>*~Quote it!~*</title>
<meta name="author" content="Stefanie Lorenz">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div style="text-align:center";>

<div id="page" style="width:900px; height: 600px; text-align:center;"> //Um den hier geht es

<div id="banner">
</div>

<div id="menu">
</div>

<div id="page" style="width:533px; position:absolute; top:200px; left:230px;">
<div id="head" style="width:540px;">Main</div>
</div>

<div id="page" style="width:150px; height: 80px; position:absolute; top:200px; left:55px;">
<div id="head" style="width:157px;">Kategorien</div>
</div>

<div id="page" style="width:150px; position:absolute; top:305px; left:55px;">
<div id="head" style="width:157px;">Neues</div>
</div>

<div id="page" style="width:150px; height: 75px; position:absolute; top:200px; left:788px;">
<div id="head" style="width:157px;">Login</div>
</div>

<div id="page" style="width:150px; height: 86px; position:absolute; top:300px; left:788px;">
<div id="head" style="width:157px;">Suche</div>
</div>

<div id="page" style="width:150px; height: 100px; position:absolute; top:412px; left:788px;">
<div id="head" style="width:157px;">Werbung</div>
</div>


</div>
<center>Optimiert für Mozilla Firefox | © by CodeUpYourLife 2008 </center>
</div>

</body>
</html>

So, im Moment hab ich bei dem besagten div-Container noch eine Höhe von 600px eingegeben, und solang der Text in dem Main-Div nicht zu lang wird funktioniert es auch und sieht ungefährt so aus:
richtig
Wenn ich nun aber die Höhe auf auto stelle, wird der Hindergrund-Div-Container auf einmal viel kleiner.
falsch
Ich versteh nur nicht, warum sich die größe nicht anpasst, denn die anderen kleinen divs sind ja alle in dem großen div-container?!

Ich hoffe ihr habt mich so einigermaßen verstanden.
Vielen Dank schon mal im Voraus für eure Hilfe.
 
Hi,

dass sich das Elternelement in der Höhe nicht automatisch anpasst, liegt an den absoluten Positionierungen seiner Nachfahrenelemente, die dadurch aus dem normalen Textfluss genommen werden.

Anstelle der Positionierungen solltest du das dreispaltige Layout mittels der float-Eigenschaft umsetzen.

Als erste Anlaufstelle kann ich dir da mein CSS-Tutorial Zentriertes Layout mit drei Spalten empfehlen.

Und wie chmee schon richtig darauf hingewiesen hat, darf eine ID innerhalb des Dokumentbaums nur einmal enthalten sein.

mfg Maik
 
Danke Maik,

ich habe jetzt dein Tut genutzt und es meinen Vorstellung angepasst. War einiges an Arbeit aber jetzt funktioniert es endlich so wie ich das will.
Vielen Dank.

Erledigt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück