✔ Hintergrundfarbe in Container A an Höhe Container B anpassen.

[Unique86]

Hallo zusammen,

ich hoffe der Titel ist nicht allzu schwer zu lesen ^^
Also ich habe folgendes Problem das es zu lösen:

Ich habe zwei Container

<div style="background-color: #000000;">
    <div class="baseContainer" id="left">A</div>
    <div class="baseContainer" id="right">B</div>
</div>

Die CSS-Klasse "baseContainer" hat nur allg. Angaben wie z.B. Hintergrundfarbe, Textgröße usw. Die Angabe der id beschreibt das Floating des Containers.

So, jetzt kommt im Container B Inhalt rein der sich nach unten zieht (also z.B durch das Einfügen von "Hallo<br />Hallo<br />Hallo<br />") auf der linken Seite soll sich der Container mitziehen d.h. eine Hintergrundfarbe soll so lang sein wie der Container mit dem Inhalt.

Ich versuche das nochmal als kleines Schaubild zu verdeutlichen:

+---------------------------+---------------------------+
|A                          | B                         |
|                           |                           |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
|                           | Hallo                     |
+---------------------------+---------------------------+

Container A soll nun komplett mit einer Hintergrundfarbe ausgefüllt sein. Bei B wird ordnungsgemäß die Hintergrundfarbe gesetzt (so lang der Text ist) aber bei Container A ist dies leider nicht der Fall

Hoffe ihr könnt mir helfen.

Gruß Sven

 

[Maik]

Hi,

in dem Artikel AnyColumnLongest findest du Verweise zu diversen Techniken für solche "Equal-Height-Columns".

mfg Maik

 

[Unique86]

Hallo,

erstmal danke für Deine Antwort allerdings werd ich aus den Artikeln nicht schlau. Wenn ich, im Bezug auf den Text oben, meinem Container A eine absolute Position gebe, ist zwar der Hintergrund ausgefüllt, jedoch doppelt so lang wie der Container B.

Ich bin absolut ratlos -.-
Anbei nochmal ein präziser Codeschnipsel.

Ausschnitt meines Templates:

<div class="baseContentContainer" id="leftContentContainer">
		<div class="naviHeadlineContainer" id="naviHeadlineContainerLight">
			<span class="text12" id="textWhite">Aktuelle Informationen</span>
		</div>
		<div class="naviBaseContainer">
		  <span class="text12" id="textBlack">
        Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />	  
		  </span>
		</div>
	</div>
	<div class="baseContentContainer" id="rightContentContainer">
		<div class="naviHeadlineContainer" id="naviHeadlineContainerMedium">
			<span class="text12" id="textWhite">Sie befinden sich hier: Startseite</span>
		</div>
		<div id="content">
      <span class="text12" id="textBlack">
        Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />	
        Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />	
        Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />
  			Content<br />	  
		  </span>
    </div>
	</div>

Hier das dazugehörige Stylesheet.

/* rootContainer */
#rootContainer
{
	position: absolute;	
	width: 1024px;
	left: 50%;		
	padding: 0px 1px 1px 1px;
	margin: 0px 0px 0px -512px;	
	border-top: 0px;
	border-right: 6px solid #979797;
	border-bottom: 6px solid #979797;
	border-left: 6px solid #979797;	
	background-color: #ffffff;
}

/* headContainer */
#headContainer
{
	position: relative;
	width: 1024px;
	height: 89px;	
	background-color: #f3d17d;
}

/* headNaviContainer */
#headNaviContainer
{
	text-align: right;
	padding: 3px;
	border-top: 4px solid #646c77;
	border-right: 0px;
	border-bottom: 1px solid #ffffff;
	border-left: 0px;
	background-color: #242c37;	
}

/* rootContentContainer */
.baseContentContainer
{
	padding: 0px;
	border: 0px;
	background-color: #f3d17d;	
}

/* leftContentContainer */
#leftContentContainer
{
  float: left;
 	width: 200px;
}

/* rightContentContainer */
#rightContentContainer
{  
 	float: right;
	width: 823px;	
}

/* naviHeadlineContainer */
.naviHeadlineContainer
{
	text-align: left;
	padding: 3px;
	border-top: 1px solid #ffffff;
	border-right: 0px;
	border-bottom: 0px;
	border-left: 0px;
}

/* naviHeadlineContainerLight */
#naviHeadlineContainerLight
{
	background-color: #3b4757;
}

/* naviHeadlineContainerMedium */
#naviHeadlineContainerMedium
{
	background-color: #c4b38a;
}

/* naviHeadlineContainerDark */
#naviHeadlineContainerDark
{
	background-color: #242c37;
}

Gruß Sven

 

[Maik]

Wenn es sich hierbei um ein Layout mit fixer Breite handelt, wären die Faux-Columns die zu empfehlende Methode.

mfg Maik

 

[Unique86]

Hallo,

danke für den Link.
Habe derweil eine andere Lösung gefunden, die mein Problem beseitigt.

Hier der Link: http://webstylez.net/Floatende-Divs-gleich-hoch-machen/

Vielen Dank
Gruß Sven