# Mitwachsende Divs innerhalb eines Containers



## infdb (15. Juli 2010)

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 (15. Juli 2010)

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 (15. Juli 2010)

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 (15. Juli 2010)

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 (15. Juli 2010)

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 (15. Juli 2010)

Hi,


Spuerlue hat gesagt.:


> 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...
> 
> ...



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


*Wichtig:* CSS - FAQ



			
				CSS - FAQ hat gesagt.:
			
		

> 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 (16. Juli 2010)

timestamp hat gesagt.:


> So klappt das bei mir:
> 
> ```
> <div style="width:400px;">
> ...


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.



infdb hat gesagt.:


> Mein Quelltext sieht folgendermaßen aus:
> 
> 
> ```
> ...


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


----------

