Mitwachsende Divs innerhalb eines Containers

[infdb]

Hallo zusammen,

ich hätte da mal eine Frage!

Und zwar habe ich einen Div-Container, welcher 2 Div-Tags beinhaltet. Wenn ich nun einen der beiden Div-Tags mit Inhalt fülle, dann verlängert sich nur dieser Div- Tag. Ich möchte aber, dass sich beide Div-Tags gleichmäßig verlängern.

Kann mir da vllt. jmd helfen?

gruß infdb

 

[timestamp]

Wie sieht denn dein Quelltext aus?

edit:
So klappt das bei mir:

<div style="width:400px;">
      <div style="height:20px;background-color:#f00;">Inhalt 1</div>
      <div style="height:20px;background-color:#ff0;">Inhalt</div>
</div>

 

[infdb]

hi
Mein Quelltext sieht folgendermaßen aus:

<div style="height:auto; ;">
    <div style="background-color:#CC99FF; min-height:100px; width:100px; float:left; height:auto;"></div>
    <div style="background-color:#00FF66; min-height:100px; width:100px; float:left; height:auto;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
</div>
</div>

Hierbei sollte jetzt der erste Div-Tag mit dem "Lorem ipsum"-Div-Tag mitwachsen, damit beide auf gleicher Höhe sind.

gruß infdb

 

[Maik]

Hi,

in dem Artikel AnyColumnLongest sind die einzelnenTechniken aufgelistet, die es ermöglichen, die Spaltenhöhen automatisch anzugleichen.

Bekanntestes Beispiel sind Faux Columns für Layouts mit absoluten Breitendimensionen.

mfg Maik

 

[Spuerlue]

hey,
also ich steh grade vor genau dem selben Problem.
Ich bin dabei eine Homepage zu machen. Wenn allerdings im Mainbereich zu viel inhalt steht wächst das menü nicht mit dem mainbereich mit sondern es entsteht eine lücke...

ich hab schon ziemlich lang gegooglet und auch Maiks links durchgeschaut...aber ich komm iwie zu keiner lösung...

kann jemand vielleicht das Beispiel von infBD ergänzen oder versuchen s zu erklären?!

Gruß Spuerlue

 

[Maik]

Hi,

hey,
also ich steh grade vor genau dem selben Problem.
Ich bin dabei eine Homepage zu machen. Wenn allerdings im Mainbereich zu viel inhalt steht wächst das menü nicht mit dem mainbereich mit sondern es entsteht eine lücke...

ich hab schon ziemlich lang gegooglet und auch Maiks links durchgeschaut...aber ich komm iwie zu keiner lösung...

kann jemand vielleicht das Beispiel von infBD ergänzen oder versuchen s zu erklären?!

Gruß Spuerlue

ohne deinen Code gesehen zu haben, tippe ich jetzt mal auf diesen möglichen Problemfall aus meinem Sticky-Thread:

• Wichtig: CSS - FAQ

6. Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Ansonsten solltest du hier Einblick in deinen Quellcode gewähren, damit man dazu konkret Stellung nehmen kann.

mfg Maik

 

[Maik]

So klappt das bei mir:

<div style="width:400px;">
      <div style="height:20px;background-color:#f00;">Inhalt 1</div>
      <div style="height:20px;background-color:#ff0;">Inhalt</div>
</div>

Tatsächlich? :suspekt:

Zeigst du uns bitte auch, wie einer deiner inneren DIV-Blöcke bei absoluter Höhenangabe mitwächst, wenn sein Inhaltsumfang die festgelegte Höhe überschreitet?

Unabhängig davon, dass hier nach dem Mitwachsen der benachbarten Blockhöhe gefragt wurde.

Mein Quelltext sieht folgendermaßen aus:

<div style="height:auto; ;">
    <div style="background-color:#CC99FF; min-height:100px; width:100px; float:left; height:auto;"></div>
    <div style="background-color:#00FF66; min-height:100px; width:100px; float:left; height:auto;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
</div>
</div>

Hierbei sollte jetzt der erste Div-Tag mit dem "Lorem ipsum"-Div-Tag mitwachsen, damit beide auf gleicher Höhe sind.

Wenn dir die erwähnte "Faux Columns"-Technik nicht zusagt, gibt es noch weitere Lösungsmöglichkeiten

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-07-16" />
<title>tutorials.de | Mitwachsende Divs innerhalb eines Containers</title>

<style type="text/css">
/* <![CDATA[ */
#wrapper {
        overflow: hidden;
}
#block_1, #block_2 {
        padding-bottom: 32767px;
        margin-bottom: -32767px;
}
/* ]]> */
</style>

</head>
<body>

<div id="wrapper">
    <div id="block_1" style="background-color:#CC99FF; min-height:100px; width:100px; float:left;"></div>
    <div id="block_2" style="background-color:#00FF66; min-height:100px; width:100px; float:left;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>

</body>
</html>

mfg Maik