layer unter einem weiteren mit dynamischer höhe

Status
Nicht offen für weitere Antworten.
S

Sasuke

Grünschnabel
Hi :)
Ich habe einen Layer welcher sich - je nach content - streckt.

Code: 
#content {
        position: absolute;
        top: 420px;
        left: 140px;
        width: 520px;
}

Jetzt möchte ich einen weiteren welcher sich genau unter diesem befindet, also so:

layer4qf.gif


Aber wie bekomm ich das hin? :/ Werde nicht schlau aus den Tutorials :-(

Ty4help!
 
Packe beide Elemente einfach unformatiert in ein gemeinsames Element und weise diesem die genannten Eigenschaften zu.
 
Mit welchen Tutorials kommst du denn nicht zurecht :confused:

Wie Gumbo schon andeutete, sind für dein Vorhaben drei DIV-Elemente erforderlich: das übergeordnete .wrapper und die beiden eingebetteten .content und .ministats:

HTML: 
<div class="wrapper">
     <div class="content">content</div>
     <div class="ministats">ministats</div>
</div>

In diesem CSS-Modell habe ich eine Mindesthöhe für das DIV.content bestimmt, um die Box deinem Preview nachzuempfinden. Selbstverständlich kann sie wieder entfernt werden, wenn sie nicht erwünscht ist. ;)

Code: 
.wrapper {
position: absolute;
top: 20px;
left: 140px;
width: 520px;
background: #f3f3f3;
border: 1px solid #d3d3d3;
}

/* Für nicht-IE-Browser */
.content {
min-height: 300px;
height: auto;
}

/* Für IE */
* html .content {
height: 300px;
}

.ministats {
line-height: 30px;
background: #d3d3d3;
}

Und hier der komplette Quelltext:

HTML: 
<!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>

<style type="text/css">
<!--
.wrapper {
position: absolute;
top: 20px;
left: 140px;
width: 520px;
background: #f3f3f3;
border: 1px solid #d3d3d3;
}

/* Für nicht-IE-Browser */
.content {
min-height: 300px;
height: auto;
}

/* Für IE */
* html .content {
height: 300px;
}

.ministats {
line-height: 30px;
background: #d3d3d3;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="content">content</div>
     <div class="ministats">ministats</div>
</div>

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

Neue Beiträge

Zurück