2 divs vertikal zentriert im container und nebeneinander

html.de-Forum HTML, XHTML & CSS
1

Liebes Forum, mein erster Post - und ich komm einfach nicht weiter…

http://img8.imageshack.us/img8/8163/plannb.png

So soll das ganze aussehen.

was bisher geschah:

#rot {
height: 100px;
width: 500px;
text-align: center;
display: table;
}
#lila {
display: table-cell;
vertical-align: middle;
}
#gruen {
float: left;
}

<div id="rot">
   <div id="lila">
      <a href="#">test</a>
   </div>
   <div id="gruen">
      blablabla...<br />blabla...
   </div>
</div>

aber irgendwie wills net soooo wirklich…

und ja, es muss ein div sein, ich kann hier kein Tabellenlayout benutzen…

P.S.: hoffe auf freundliche Aufnahme hier im Forum

2

Du hast das Prinzip von float nicht verstanden.

float gibt man im ersten Element neber dem sich alle anderen anordnen sollen an,

mag anfangs unlogisch klingen da der Gedankengang das float left bedeutet das das Element sich links an das Nachbarelement ran kuschelt, zwar falsch aber verständlich ist.

Gib im ersten Element (Blau) einfach float:left; an. Float:left; wirkt wie ein Magnet der alles auf seiner Stammebene (gleiche Ebene vom logischem Aufbau) (das heißt Eltern- und Kinderelemente ausgenommen) rechts an sich heranzieht und sie dort der Reihenfolge nach an sich anordnet, quasi magnetisiert er alle anderen Elemente.

Eltern Kindeselemente, oder Elemente die außerhalb des Elternelementes des floatenden Elements sind geht float am Po vorbei.

Wenn du nicht mehr willst das er die Elemente sich nach ihm anordnen, solltest du in dem Element ab dem das nicht mehr sein soll clearen, mit clear:both;, die Elemente nach dem geclearten machen wieder das wofür sie gemacht wurden, wenn sie zB block sind brechen sie die Zeile ab.

Hoffe es ist einigermaßen verständlich.

MfG

3

Imbericle,
es geht um vertical-align.
Nicht ums floaten.

ouh2,
Wenn du schon display: table; einsetzt, brauchst du nicht floaten.
Tabellenzellen liegen immer nebeneinander.
html:

<div id="table">
<div id="row">
<div id="zelle-1">
<a href="#">test</a>
</div>
<div id="zelle-2">
blablabla...<br />blabla...
</div>
</div>
</div>

die css-Tabelle:

#table {
display: table;
table-layout: fixed;
height: 100px;
width: 500px;
border: 1px solid red;
}

#row {
text-align: center;
display: table-row;
}

#zelle-1 {
display: table-cell;
vertical-align: middle;
}
#zelle-2 {
display: table-cell;
vertical-align: middle;
}

Der IE kennt das css-Tabellen erst ab Vers.8.
Mit display-inline-block kannst du ebenfalls vertical-align benutzen
( im IE5.5 bis 7 mit display: inline; + zoom:1; ) :

<!--[if lt IE 8]>
<style>
table-row {
display: inline;
zoom:1;
vertical-align: middle;
}

#zelle-0, #zelle-1, #zelle-2 {
display: inline;
zoom:1;
width: 250px;
}

#zelle-0 {
line-height: 100px;
width: 0px;
overflow: hidden;
}

</style>
<![endif]-->

#zelle-0 spannt die Zeilenhöhe für die inline-blöcke auf
html

...
[COLOR="DarkRed"][B]<div id="zelle-0">
&nbsp;<!-- Zeile für IE > 7 aufspannen-->
</div>[/B]
<div id="zelle-1">
<a href="#">test</a>
</div>
<div id="zelle-2">
blablabla...<br />blabla...
</div>
...

Ich rate aber davon ab px-Höhen für Text zu verwenden.

4

Das mag dein Hirn geschlossen haben, doch meins schloss das er Probleme mit float hat, da er dieses auch falsch verwendet hat.

In der Überschrift stand was von nebeneinander und zentriert.

Eine Problematik hat er nicht benannt.

So hat er jetzt auf jedenfall alles was er will :mrgreen:

MfG

5

In der Überschrift stand was von nebeneinander und zentriert.

Steht da noch immer :wink:
2 divs vertikal zentriert im container und nebeneinander.

Ja,
Es wurde auch falsch gefloatet.