DIV und Tiefe

Webdesign & Technik HTML & CSS
1

Moin,

ich habe ein kleines Problem mit den lieben DIVs.

Und zwar brauche ich für ein Projekt zwei DIVs, die unter einem anderen liegen.

|---------------||---------------|
| Bereich 1        || Bereich 2        |
|                     ||                     |
|            |------------|             |
|            | Bereich 3   |              |
|            |------------|             |
|                     ||                     |
|---------------||---------------|

Das soweit hinzubekommen ist erstmal kein Problem.


<style type="text/css">
html, body { margin:0px; padding:0px; text-align:center; }
#left { float:left; width:50%; background:black; position:absolute; left:0%; top:0%; z-index:1; }
#right { float:right; width:50%; background:grey; position:absolute; right:0%; top:0%; z-index:1; }
#hplayer { width:1000px; margin:0px auto; background:red; position:relative; z-index:2; }
</style>

<!-- unnötiges weggelassen --->

	<div id="layer">
		<div id="left"></div>
		<div id="right"></div>


		<div id="hplayer">		
		TEST</div>
	</div>

Mein Problem ist die Höhe der DIVs “left” und “right”. Durch das “absolute” liegen sich ja außerhalb des Textflusses. Wie kriege ich das hin, dass die beiden auf die Höhe von hplayer reagieren?

MfG

2

float in Kombination mit absoluter Positionierung ist Unfug.

Wenn du bei absoluter Positionierung zwei gegenüberliegende „Koordinaten“ angibst, dann ergibt sich der Wert der jeweiligen Länge (Breite/Höhe) daraus.

3

Moin,

ja float ist im Prinzip Unfug - würde es nicht den lieben IE geben … der versteht das sonst leider nicht (jedenfalls in manchen Versionen).

Danke für den Hinweis mit den gegenüberliegenden Koordinaten, das klappt soweit.

MfG

4

Was versteht der nicht, und in welchen Versionen?

5

Wie wärs mit position: relative und float?

6

Was versteht der nicht, und in welchen Versionen?[/quote]

Hm, ich merke gerade, dass ich auch mal mit „fixed“ experimentiert habe, da geschieht folgendes:

Wenn du float wegnimmst, zeigt er die beiden Bereiche #left und #right untereinander an. (IE 8)

Bei „absolute“ kann man float weglassen. Interessant mal wieder von MS …

@Michi

Bei „relative“ und float zeigt er #right gar nicht an und die Bereiche untereinander (IE 8). Im Firefox werden #left und #right überhaupt nicht angezeigt.

Aber mein Problem ist eh gelöst dank chrisb.

Danke für eure Ideen und Hilfe :slight_smile:

MfG

7

Mit Float funktioniert es auch, dann benötigt man gar keine relative oder absolute Positionierung :wink:

[code]

html, body { margin:0px; padding:0px; text-align:center; } #left { float:left; width:50%; background:black; color: white; height: 10em;} #right { float:left; width:49.99999999%; background:#888; height:10em; } #hplayer { margin-top: 0.1px; clear:both; width:auto; background:red; } Test
Left
Right
  <div id="hplayer">      
  TEST</div>
[/code]
8

Moin,

nein @progandy. Der rote Bereich soll ja über den beiden anderen liegen, dafür benötigt man z-index, was man wiederrum nur nach einer Positionierung nutzen kann/darf. Wenn du nur #left und #right nebeneinander anzeigen willst, genügt es mit float zu arbeiten, allerdings ist dein Code da wiederum unsauber. Folgendes ist da eleganter.

#left { width:50%; height:100px; float:left; }
#right { width:50%; height:100px; float:right; }

...

<div id="left"></div>
<div id="right"></div>
<div style="clear:both;"></div>

MfG

9

ah, ich hab die “Zeichnung” falsch verstanden… Ist ja total verschoben.
@myPages: was hab ich da anders? Ein paar Farben drin und ein paar Hacks für den IE (0.1px und width:49.999%) und das wars auch schon :wink:

10

2x float left

:wink:

Und falls man wirklich IE-Hacks brauchen sollte dafür - was ich bezweifle - würde ich die in eine weitere CSS-Datei legen, damits übersichtlicher wird, aber das ist noch nen anderer Schuh :p

MfG