✔ Kleines CSS-Problem

[chriss_2oo4]

Hi,

ich weiss dass der Titel nicht gerade gut von mir gewählt ist, aber mir ist nichts passendes eingefallen was das problem in wenigen Worten beschreibt.

Und zwar hab ich folgendes Problem: Ich möchte mit CSS drei div-Container nebeneinander plazieren und jeder Container soll die gleiche Höhe haben, auch wenn der Inhalt eines Containers leer ist.

Des Weiteren sollen die ersten zwei Container eine fixe breite haben und der letze soll den übrigen Platz belegen.

Mein Ansatz ist wie folgt:

.Col1
{
background: #FFF;
float: left; width: 200px;
margin: 0; padding: 0;
border: none;
}

.Col2
{
background: #000;
float: left; width: 2px;
margin: 0; padding: 0;
border: none;
}

.Col3
{
background: #FFF;
margin: 0; padding: 0;
border: none;
}

<div id="Col1">Inhalt </div>
<div id="Col2"></div>
<div id="Col2">Inhalt</div>

Wie muss ich meinen Code ändern um das gewünschte Resultat zu erhalten?


Vielen Dank!
Beste Grüße!
Chriss

 

[Maik]

Hi,

zu deiner ersten Frage bezüglich der angleichenden Spaltenhöhen empfehle ich dir den Artikel AnyColumnLongest, der hierfür diverse technische Lösungsansätze bereithält.

Dein weiteres Vorhaben mit den Spaltenbreiten funktioniert so:

.Col3
{
background: #FFF;
margin: 0 0 0 202px; padding: 0;
border: none;
}

Und im HTML-Code müssen auch die im Stylesheet deklarierten Klassenbezeichner (mit einem Punkt vor dem Namen) aufgerufen werden:

<div class="Col1">Inhalt </div>
<div class="Col2"></div>
<div class="Col3">Inhalt</div>

Ansonsten, wenn hier ID-Bezeichner erwünscht sind, muß in den Selektoren der Punkt durch das #-Zeichen ersetzt werden:

#Col1
{
background: #FFF;
float: left; width: 200px;
margin: 0; padding: 0;
border: none;
}
#Col2
{
background: #000;
float: left; width: 2px;
margin: 0; padding: 0;
border: none;
}
#Col3
{
background: #FFF;
margin: 0 0 0 202px; padding: 0;
border: none;
}

mfg Maik

 

[chriss_2oo4]

Hi,

erstmal vielen dank für deine antwort! Allerdings hab ich da noch ne frage:

Also mit "display: table-cell" verhält sich der Container wie ein Tabellenelement? Dann müsste ich in allen Containern sagen, dass es sich um Tabellenelemente handelt.

So funkitonierts bei mir nicht:

#Col1
{
display: table-cell;
background: #FFF;
float: left; width: 200px;
margin: 0; padding: 0;
border: none;
}
#Col2
{
display: table-cell;
background: #000;
float: left; width: 2px;
margin: 0; padding: 0;
border: none;
}
#Col3
{
display: table-cell;
background: #FFF;
margin: 0 0 0 202px; padding: 0;
border: none;
}

hab ich das ganze jetzt falsch verstanden, oder brauch ich noch einen main-container der besagt, dass es sich um eine tabelle handelt

#Table
{
display: table;
}

 

[Maik]

Von den Tabelleneigenschaften der display-Eigenschaft rate ich dir dringendst ab, sofern du hierbei die IE-Familie berücksichtigen willst, denn diese weiß selbst in der aktuellen IE8-Version diese Eigenschaftswerte noch immer nicht zu interpretieren.

In allen anderen Browsern, die hier der CSS-Spezifikation folgen, funktioniert dein Versuch so:

<div id="Table">
     <div id="Col1">Inhalt</div>
     <div id="Col2"></div>
     <div id="Col3">Inhalt</div>
</div>

* {
margin:0;
padding:0;
}
#Table {
display:table;
width:100%;
}
#Table div {
display: table-cell;
}
#Col1 {
background: #FFF;
width: 200px;
}
#Col2 {
background: #000;
width: 2px;
}
#Col3 {
background: #FFF;
}

mfg Maik

 

[chriss_2oo4]

Hi,

nochmals vielen Dank für deine super schnellen Antworten. Welche Variante würdest du mir dann empfehlen? In dem, von dir empfohlenen Artikel, werden vier Möglichkeiten beschrieben.

Vielen Dank!


Beste Grüße
Chriss

 

[Maik]

Wie wäre es mit Equal Height Columns - revisited?

mfg Maik

 

[Maik]

Wie wäre es mit Equal Height Columns - revisited?

Netter Nebeneffekt: Dein mittlerer 2px-breite und inhaltsleere Spaltenblock #Col2 entfällt im HTML-Code gänzlich, wenn dafür der linke Spaltenblock #Col1 einen rechten 2px-starken schwarzen Rahmen erhält ;-)

mfg Maik

 

[chriss_2oo4]

Coole Sache... vielen Dank nochmals!

Beste Grüße
Chriss