dynamische <div>-Höhe

Status
Nicht offen für weitere Antworten.

KuShi

Grünschnabel
Hi, ich habe meine Website mittels verschachtelter DIVs aufgebaut.

Leider habe ich das Problem, dass sich das "Haupt-DIV" nicht automatisch mit vergrößert, sobald der Inhalt ein wenig anwächst.

Hier der Aufbau:

<div id='layout'>

<div id='links'>
<div>
<div>

<div id='rechts'>
<div>
<div>

<div id='inhalt'>

</ div (layout)>

das Div Layout passt sich aber nicht dynamisch an, hab´s schon mit allem möglichen versucht.

Hier der Link zu einer solchen Problem-Seite (Layout noch mit min-height, sollte aber ohne):
http://www.ragnarok-online-2.de/hp/artikel/disclaimer.php
 
Hi,

tausch mal im Selektor #content die top-Eigenschaft gegen margin-top aus und entferne zu Beginn des HTML-Codes zwei der drei gesetzten Dokumenttyp-Deklarationen, bei denen auf jeden Fall die "Frameset"-Variante entfällt.
 
Danke für die schnelle Antwort.
Jetzt klappt´s.

Kannst Du mir noch den Grund nennen, damit ich das verstehe, oder ist das jetzt zu kompliziert? Ich habe die drei Dokumenttyp-Deklarationen eingefügt, wegen dem IE und dessen Boxmodel.
 
Wie es scheint, wird durch die Positionsangabe top die Box aus dem normalen Textfluss genommen, weshalb das umschliessende DIV nicht mehr die korrekte Höhe annimmt.

Damit der IE6 das Boxmodell richtig unterstützt, reicht eine der beiden erstgenannten Doctypes völlig aus, um das Dokument im "Standardsmode" zu übergeben. ;)
 
Danke :D

Achso: gibt es noch einen Trick, mit dem der Content-Div immer bis zum unteren Rand reicht, der Footer also mit dem unteren Rand abschließt?
 
Zuletzt bearbeitet:
Ja, den gibt es - schau dir mal diesen Prototypen an ;)

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<meta name="author" content="michaelsinterface">

<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

div#wrapper {
position: relative;
width: 760px;
margin: 0 auto;
border-left: 1px solid #a0bbde;
border-right: 1px solid #a0bbde;
min-height: 100%;
height: auto !important;
height: 100%;
}

div#leftCol {
width: 125px;
float: left;
}

div#rightCol {
width: 125px;
float: right;
}

div#centerCol {
margin: 0 125px;
}

div#footer {
position: absolute;
bottom: 0;
width: 760px;
height: 20px;
background: #fff;
border-top: 1px solid #a0bbde;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
     <div id="footer">footer</div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.
Zurück