versachtelte Divs ausrichten

[waflija]

Hi,

ich habe folgendes Problem:

  
div#main {  
   position:relative;  
}  
  
div#inner1 {  
   position:absolute;  
}  
div#inner2 {  
   position:absolute;  
}  
  

  
<div id="main">  
   <div id="inner1">  
      blablabla  
   </div>  
   <div id="inner2">  
      blupblupblup  
   </div>  
</div>  

Das Problem ist, dass sich die Höhe des "main" Blocks nur an der Höhe des "inner1" Blocks orientiert, obwohl der "inner2" Block höher ist.

Wie kann ich den äußeren Block dazu bringen sich an allen child-elementen zu orientieren?

Ich konnte leider nach mehreren Stunden google und ausprobieren keine Lösung finden.

[misterunknown]

Moin,

Das Problem ist, dass sich die Höhe des "main" Blocks nur an der Höhe des "inner1" Blocks orientiert, obwohl der "inner2" Block höher ist.

Mit deinem geposteten Code nicht.

Grüße Marco

[waflija]

Moin,

Das Problem ist, dass sich die Höhe des "main" Blocks nur an der Höhe des "inner1" Blocks orientiert, obwohl der "inner2" Block höher ist.

Mit deinem geposteten Code nicht.

Grüße Marco

Wie dann?

Gibt es Alternativen?

[misterunknown]

Moin,

Wie dann?
Gibt es Alternativen?

Dazu müsste man erstmal wissen, wie es aussehen soll. Der Code, den du gepostet hast, sieht in echt so aus, wie im Link. Daraus kann ich nichts entnehmen, vor allem nicht, warum du position-Angaben verwendest.

Grüße Marco

[waflija]

Moin,

Wie dann?
Gibt es Alternativen?

Dazu müsste man erstmal wissen, wie es aussehen soll. Der Code, den du gepostet hast, sieht in echt so aus, wie im Link. Daraus kann ich nichts entnehmen, vor allem nicht, warum du position-Angaben verwendest.

Grüße Marco

Ok.

ich versuchs mal anders.

Ich habe: Einen Contentbereich, einen "breadcrumb" pfad bereich und ein Menu.

Das Menu soll links stehen. (feste Breite / flex. Höhe)
Der Contentbereich soll sich rechts vom Menu befinden. (flexible Breite / Höhe)
Der Breadcrumb über dem Contentbereich. (feste höhe / fley. Breite)

Das ganze soll in einen äußeren Container. (flex. Höhe und Breite)

[Steel]

Hi!

KLingt jetzt nicht besonders. Hilft Dir http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?

[waflija]

Hi!

KLingt jetzt nicht besonders. Hilft Dir http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?

nicht wirklich... Ich will ja gerade keine Tabelle bauen. - Oder ist das die einzige Lösung?

[waflija]

Hi!

KLingt jetzt nicht besonders. Hilft Dir http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display?

nicht wirklich... Ich will ja gerade keine Tabelle bauen. - Oder ist das die einzige Lösung?

Ich bin jetzt bei folgender Lösung:

  
  
<div style="background-color:#FF0000;">  
	<div style="float:left;width:100px;height:100px;background-color:#00ff00;" id="left_col">  
		.asdasdasdasd  
	</div>  
	<div style="position:relative;left:200px;width:100px;height:200px;background-color:#0000ff;" id="main_col">  
		<div id="breadcrumb">  
                <div id="content">  
	</div>  
	.  
</div>  
  

[Steel]

Das sollte auch ohne gefloate mit display moeglich sein. Informier dich doch mal ueber inline-block.

[misterunknown]

Moin,

Das sollte auch ohne gefloate mit display moeglich sein. Informier dich doch mal ueber inline-block.

In dem Fall hat man allerdings das Problem, dass entweder beide Divs relative Größenangaben haben müssen (20% und 80%), oder die Seite nicht ausgefüllt wird.

Grüße Marco

[waflija]

Moin,

Das sollte auch ohne gefloate mit display moeglich sein. Informier dich doch mal ueber inline-block.

In dem Fall hat man allerdings das Problem, dass entweder beide Divs relative Größenangaben haben müssen (20% und 80%), oder die Seite nicht ausgefüllt wird.

Grüße Marco

Genau aus diesem Grund nehme ich float. Sonst kann ich gleich wieder "<table>" nehmen...

[misterunknown]

Moin,

Ich bin jetzt bei folgender Lösung:

<div style="background-color:#FF0000;">
<div style="float:left;width:100px;height:100px;background-color:#00ff00;" id="left_col">
.asdasdasdasd
</div>
<div style="position:relative;left:200px;width:100px;height:200px;background-color:#0000ff;" id="main_col">
<div id="breadcrumb">
                <div id="content">
</div>
.
</div>

  
Ich würde bei so einem simplen Layout gar nicht mit Position-Angaben arbeiten. Wenn der Breadcrump-Bereich außerhalb des Content-Divs sein soll, [ändere doch mein Beispiel ab](https://forum.selfhtml.org/?t=208031&m=1414597).  
  
Grüße Marco

[waflija]

Ja. So ähnlich bin ich jetzt auch rausgekommen:

<div id="inner_main">  
  <div id="col_left">  
  <div id="col_right"> </div>  
  <div id="col_main">  
    <div id="breadcrumb">  
    <div id="content">  
  </div>  
</div>  
[code
  
[code lang=css]  
div#inner_main {  
	margin:0;  
	padding:0;  
	  
}  
	div#col_main {  
		position:relative;  
		left:15px;  
	}  
		div#content {  
		    width:710;  
	  
		}  
		  
		div#breadcrumb {  
			height:20px;  
		}  
	  
	div#col_left {  
		width:193px;  
		float:left;  
		  
	}  
	div#col_right {  
		width:193px;  
		float:right;  
		  
	}  

Nur Google Chrome stellt das irgendwie falsch da. Das "content" div rutsch hier immer unter das "menu". Alle anderen Browser (Firefox, IE8, IE7, Opera und Netscape) stellen es "richtig" da...

[misterunknown]

Moin,

Nur Google Chrome stellt das irgendwie falsch da. Das "content" div rutsch hier immer unter das "menu". Alle anderen Browser (Firefox, IE8, IE7, Opera und Netscape) stellen es "richtig" da...

Und nochmal: Ich würde gar nichts mit position-Angaben machen. Das ist auch nicht nötig.

Grüße Marco

[misterunknown]

Moin,

Ich habe: Einen Contentbereich, einen "breadcrumb" pfad bereich und ein Menu.
Das Menu soll links stehen. (feste Breite / flex. Höhe)
Der Contentbereich soll sich rechts vom Menu befinden. (flexible Breite / Höhe)
Der Breadcrumb über dem Contentbereich. (feste höhe / fley. Breite)
Das ganze soll in einen äußeren Container. (flex. Höhe und Breite)

Das ist doch ein Wort. Dann kannst du die Navigation links floaten, den content-div musst du margin-left geben, und zwar so breit (oder etwas breiter), wie die Navigation ist, und dem breadcrump-div gibst du eine feste Breite. Das wars.

<body>  
   <div id="navigation">  
      Navilinks  
   </div>  
   <div id="content">  
      <div id="breadcrump">  
         Krümel  
      </div>  
      weiterer Inhalt...  
   </div>  
</body>

#navigation {  
float:left;  
}  
#breadcrump {  
heigth: 30px;  
}

Wenn man dann noch ein paar andere Eigenschaften hinzufügt, dann kann das ganz ordentlich aussehen.

Grüße Marco

[misterunknown]

Moin,

[code lang=css]#navigation {
float:left;
}

Hier muss natürlich noch eine width-Angabe drin stehen, wie bei der Testseite, denn das ist bei gefloateten Objekten erstens Pflicht und zweitens erspart dir das Ärger mit dem Content-Div.

Grüße Marco

[Kai345]

[latex]Mae  govannen![/latex]

Hier muss natürlich noch eine width-Angabe drin stehen, [...] denn das ist bei gefloateten Objekten erstens Pflicht [...]

Nö.

Stur lächeln und winken, Männer!
Kai

[MudGuard]

Hi,

div#main {
   position:relative;
}
div#inner1 {
   position:absolute;
}
div#inner2 {
   position:absolute;
}

>   
> ~~~html
  

> <div id="main">  
>    <div id="inner1">  
>       blablabla  
>    </div>  
>    <div id="inner2">  
>       blupblupblup  
>    </div>  
> </div>  
> 

Das Problem ist, dass sich die Höhe des "main" Blocks nur an der Höhe des "inner1" Blocks orientiert, obwohl der "inner2" Block höher ist.

Nein, bei diesem Code richtet sich die Höhe des #main nach keinem der inneren div.

Wie kann ich den äußeren Block dazu bringen sich an allen child-elementen zu orientieren?

Nicht absolut positionieren.

cu,
Andreas