3 divs nebeneinander mit dynamisch gleicher Höhe

16.01.2006, 18:48

Hallo,

ich positioniere drei divs nebeneinander. der div, welchen den meisten content hat, bestimmt die höhe. diese höhe soll auch von den beiden anderen divs angenommen werden. welche div den meisten platz braucht, ist nicht vorherzusagen.

im folgenden code sind die drei divs und etwas text. im mittleren div ist in diesem beispiel der meiste text enthalten und somit bestimmt dieser div die höhe. aber leider nicht für den ersten und dritten div. diese beiden sollten aber dieselbe höhe, wie der zweite div annehmen.

wie geht das? hat jemand ne idee?
für eure hilfe schon mal herzlichen dank.

Code:

<html>
<head>

<style>
div#frame {

}

div#one {
	border: 1px solid #000000;
	width: 30px;
	background-color: #FF0000;
	float: left;
	padding: 5px;
	height: 100%;
}

div#two {
	border: 1px solid #000000;
	width: 580px;
	background-color: #FFFFFF;
	float: left;
	height: 100%;
	padding: 5px;
	height: 100%;
}

div#three {
	border: 1px solid #000000;
	width: auto;
	background-color: #FF0000;
	float: left;
	padding: 5px;
	height: 100%;
}
</style>

</head>

<body>
<div id="frame">
	<div id="one">
	one
	</div>
	
	<div id="two">
	two
four
five

	</div>

	<div id="three">
	three
	</div>
</div>
</body>

</html>

lomtas · 16.01.2006, 19:18

erstell ein bild mit 1px höhe, das die drei hintergrundfarben enthält und pack es als background image in den body, so kannst du die drei verschiedenen hintergründe vortäuschen.

xabbuh · 16.01.2006, 20:37

Ich würde den Hintergrund allerdings eher in dem div-Container definieren, der die drei Spalten umschließt, da der Hintergrund sonst höher wird als gewollt. Außerdem werden dafür mehr als 1 Hintergrundbild benötigt, da die mittlere Spalte in der Breite flexibel ist.

Mein Vorschlag wäre daher folgender:

HTML:

Code:

<div id="frame">
  <div id="bgframe1">
    <div id="bgframe2">
      <div id="one">
      </div>
      <div id="two">
      </div>
      <div id="three">
      </div>
      <div class="spacer" />
    </div>
  </div>
</div>

CSS (auf das Wesentliche gekürzt):

Code:

.spacer {
    clear : both;
}
#frame {
    background-color : #f00;
}
#bgframe1 {
    background : url(bgone.gif) repeat-y left top;
}
#bgframe2 {
    background : url(bgtwo.gif) repeat-y 30px top;
}
#one {
    width : 30px;
    float : left;
}
#two {
    width : 580px;
    float : left;
}
#three {
    float : left;
}

EDIT: Den Container #frame könnte man sich auch sparen und die Hintergrundfarbe für die rechte Spalte auch einfach in #bgframe1 oder #bgframe2 definieren.

lomtas · 16.01.2006, 21:24

das ist gut. sehr gut sogar.

xabbuh · 16.01.2006, 21:32

Zitat:

Zitat von lomtas

das ist gut. sehr gut sogar.

Wenn maximal eine Spalte in der Breite flexibel ist, fährt man mit diesem Prinzip recht gut. Hast du eine Idee, wie man vorgehen sollte, wenn beispielsweise alle drei Spalten in der Breite flexibel sind? Dafür habe ich bis jetzt leider noch keine Lösung finden können.

lomtas · 16.01.2006, 23:00

nee. habe das bisher noch nicht gebraucht. sorry.

17.01.2006, 21:09

Erstmal danke für die schnelle Hilfe.
Leider lässt sich das bei mir hier nicht auf diese Weise lösen.

@xabbuh: Deine Idee ist gut. Gefällt mir. Nur leider kann ich diese Idee nicht in die Praxis umsetzen. Hast du es selbst schon ausprobiert, ob dein Browser die Seite richtig darstellt?
Falls ja, dann wäre ich dir über nen Link, dass ich es mal selbst betrachten kann, sehr dankbar.
Falls nein, dann würde ich dich bitten, es tatsächlich auszuprobieren und mir nen Link zu schicken, wo ich es mit meinen eigenen augen betrachten kann

Das Problem das sich mir stellt ist, dass die one, two, three-divs die übergeordneten nicht in der höhe verändern. somit zeigt es keinen hintergrund an, da die bgframe's keine höhe haben.

Gibts da noch ne CSS-Eigenschaft, die die div-Abhängigkeiten bestimmt?

17.01.2006, 22:18

außerdem reagieren IE und mozilla auf div in div auch unterschiedlich.
beim IE vergrößert sich der div, wenn der innere div die maße des äußeren sprengt. bei mozilla gibt es einfach ne überlappung und der innere ragt über den äußeren hinaus.

frage: kann man das steuern? gibt es da ne css-eigenschaft, die dafür verantwortlich ist? wie kann ich verhindern, dass der div über den anderen hinausragt?

17.01.2006, 22:46

Zitat:

wie kann ich verhindern, dass der div über den anderen hinausragt?

Auf die Breite oder Höhe bezogen ?

17.01.2006, 22:47

auf die Höhe

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] CSS: Elemente nebeneinander anordnen		HTML, Usability und Barrierefreiheit	21	29.08.2011 08:05
DIVs nebeneinander?	wers1	HTML, Usability und Barrierefreiheit	13	18.07.2008 14:26
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
div's schachteln mit float	Crypi	HTML, Usability und Barrierefreiheit	8	31.01.2006 16:30
DIV's positionieren	scooter	HTML, Usability und Barrierefreiheit	10	12.01.2006 16:11
div nebeneinander	spoi	HTML, Usability und Barrierefreiheit	16	05.01.2006 23:22
Tabellen Inhalt nebeneinander auslesen ?		PHP Tipps 2005-2	6	01.07.2005 14:21
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
[Erledigt] 2 divs nebeneinander		HTML, Usability und Barrierefreiheit	8	12.01.2005 17:27
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
Verschachtelung von DIV's bei unterschiedlichen Auflösungen		HTML, Usability und Barrierefreiheit	8	24.12.2004 14:45
mehrere gleichnamige DIVs möglich?		HTML, Usability und Barrierefreiheit	6	26.08.2004 11:56

16.01.2006, 18:48
Gast Beiträge: n/a	3 divs nebeneinander mit dynamisch gleicher Höhe Hallo, ich positioniere drei divs nebeneinander. der div, welchen den meisten content hat, bestimmt die höhe. diese höhe soll auch von den beiden anderen divs angenommen werden. welche div den meisten platz braucht, ist nicht vorherzusagen. im folgenden code sind die drei divs und etwas text. im mittleren div ist in diesem beispiel der meiste text enthalten und somit bestimmt dieser div die höhe. aber leider nicht für den ersten und dritten div. diese beiden sollten aber dieselbe höhe, wie der zweite div annehmen. wie geht das? hat jemand ne idee? für eure hilfe schon mal herzlichen dank. Code: <html> <head> <style> div#frame { } div#one { border: 1px solid #000000; width: 30px; background-color: #FF0000; float: left; padding: 5px; height: 100%; } div#two { border: 1px solid #000000; width: 580px; background-color: #FFFFFF; float: left; height: 100%; padding: 5px; height: 100%; } div#three { border: 1px solid #000000; width: auto; background-color: #FF0000; float: left; padding: 5px; height: 100%; } </style> </head> <body> <div id="frame"> <div id="one"> one </div> <div id="two"> two four five </div> <div id="three"> three </div> </div> </body> </html>


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.01.2006, 19:18
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	erstell ein bild mit 1px höhe, das die drei hintergrundfarben enthält und pack es als background image in den body, so kannst du die drei verschiedenen hintergründe vortäuschen.

16.01.2006, 20:37
xabbuh Erfahrener Benutzer Registriert seit: 13.11.2005 Beiträge: 2.583	Ich würde den Hintergrund allerdings eher in dem div-Container definieren, der die drei Spalten umschließt, da der Hintergrund sonst höher wird als gewollt. Außerdem werden dafür mehr als 1 Hintergrundbild benötigt, da die mittlere Spalte in der Breite flexibel ist. Mein Vorschlag wäre daher folgender: HTML: Code: <div id="frame"> <div id="bgframe1"> <div id="bgframe2"> <div id="one"> </div> <div id="two"> </div> <div id="three"> </div> <div class="spacer" /> </div> </div> </div> CSS (auf das Wesentliche gekürzt): Code: .spacer { clear : both; } #frame { background-color : #f00; } #bgframe1 { background : url(bgone.gif) repeat-y left top; } #bgframe2 { background : url(bgtwo.gif) repeat-y 30px top; } #one { width : 30px; float : left; } #two { width : 580px; float : left; } #three { float : left; } EDIT: Den Container #frame könnte man sich auch sparen und die Hintergrundfarbe für die rechte Spalte auch einfach in #bgframe1 oder #bgframe2 definieren.

16.01.2006, 21:24
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	das ist gut. sehr gut sogar.

16.01.2006, 23:00
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	nee. habe das bisher noch nicht gebraucht. sorry.

17.01.2006, 21:09
Gast Beiträge: n/a	Erstmal danke für die schnelle Hilfe. Leider lässt sich das bei mir hier nicht auf diese Weise lösen. @xabbuh: Deine Idee ist gut. Gefällt mir. Nur leider kann ich diese Idee nicht in die Praxis umsetzen. Hast du es selbst schon ausprobiert, ob dein Browser die Seite richtig darstellt? Falls ja, dann wäre ich dir über nen Link, dass ich es mal selbst betrachten kann, sehr dankbar. Falls nein, dann würde ich dich bitten, es tatsächlich auszuprobieren und mir nen Link zu schicken, wo ich es mit meinen eigenen augen betrachten kann Das Problem das sich mir stellt ist, dass die one, two, three-divs die übergeordneten nicht in der höhe verändern. somit zeigt es keinen hintergrund an, da die bgframe's keine höhe haben. Gibts da noch ne CSS-Eigenschaft, die die div-Abhängigkeiten bestimmt?

17.01.2006, 22:18
Gast Beiträge: n/a	außerdem reagieren IE und mozilla auf div in div auch unterschiedlich. beim IE vergrößert sich der div, wenn der innere div die maße des äußeren sprengt. bei mozilla gibt es einfach ne überlappung und der innere ragt über den äußeren hinaus. frage: kann man das steuern? gibt es da ne css-eigenschaft, die dafür verantwortlich ist? wie kann ich verhindern, dass der div über den anderen hinausragt?