div auf gleiche höhe bringen

  • Themenstarter Themenstarter Deejoy
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
D

Deejoy

Hi,
ich habe 3 Container nebeneinander (menu , trenner, content) und möchte nun das der in der mitte (trenner) immer so hoch ist wie der höchste (menu oder content) auserdem dem soll das Bild darin immer vertical mittig sein.
Wie läßt sich das am besten machen ?

Code:
<style type="text/css">
<!--
#menu{
float:left;
width:165px;
background-color:#00FF00;

}
#trenner{
float:left;
width:15px;
height:auto;
background-image:url(img/reddottedline_bg.gif);
}
#content{
float:left;
width:595px;
background-color:#CC0000;
}

-->
</style>
<div id="menu">&nbsp;</div>
<div id="trenner">&nbsp;<img src="img/reddottedline.gif" /></div>
<div id="content">&nbsp;</div>
 
Mein Vorschlag:
HTML:
<div id="container">
	<div id="menu">Menü</div>
	<div id="content">Inhalt</div>
</div>
Code:
#container {
	width:			775px;
	background:		url(http://images.google.de/images?q=tbn:ufQkSrTI9y4J:www.strategixdesigns.com/images/dottedline.gif) repeat-y 172px 0;
}
#menu {
	float:			left;
	width:			165px;
	background-color:	#0f0;
}
#content {
	margin-left:		180px;
	background-color:	#c00;
}
 
Hi,

bei dem Vorschlag gibt es nur ein Problem. Ich habe in dem Trenner einmal ein Bild und einmal ein Hintergrundbild dass das Bild entsprechend verlängert.
Das bekomme ich hier nicht rein und vorallem nicht immer mittig.

hier mal ein Beispiel mit Tabellen

http://web27.netztitan.de/div.html

Gruß
Deejoy
 
Zuletzt bearbeitet von einem Moderator:
Hi,

so wie ich das sehe würde ich die XHTML so aufbauen:

Code:
<div id="gesamtinhalt">
    <div id="linkeSpalte">
    ...Inhalt linke Spalte
    </div>
    <div id"Trenner">
    </div>
    <div id="rechteSpalte">
    ...Inhalt rechte Spalte
    </div>
    <div id="footer">&nbsp;</div>
</div>

Die CSS dann folgendermaßen:

#gesamtinhalt { background-image: url(pics/hintergrund_mit_trennlinie.gif);
background-repeat:y; }

#linkeSpalte { float:left; ........}
#Trenner { width:20px; }
#rechteSpalte { float:left oder right; }
#footer { clear:both; overflow:hidden } //clear:both ist entscheidend damit die Box gesamtInhalt sich ausdehnt

Hoffe es klappt

Grüße
Liverson
 
Hi,
danke ähnlich hatte ich es auch schon versucht aber auch dein Vorschlag will nicht so wie ich

Gruß
Deejoy
 
Status
Nicht offen für weitere Antworten.
Zurück