2 div nebeneinander; Problem mit Textfluss und

[tattergreis]

Hi allerseits

Ich hab ein Problem mit CSS und das nervt mich grad tierisch. Ich versuch seit Stunden zwei Divs (die immer gleich hoch sein sollen) nebeneinander zu bekommen und darunter noch eine Div die so breit wie die oberen beiden zusammen sein soll.

Mit einer Tabelle ausgedrückt ists total simple. Das könnt ihr euch etwa so vorstellen (grösse nicht formatiert):

<table border="1">
 <tr>
 <td>Name als EMail<br />Homepage als Link</td>
 <td>Wohnort<br />Datum</td>
 </tr>
 <tr>
 <td colspan="2">Eintrag</td>
 </tr>
</table>

Da allerdings immer gepredigt wird, dass man alles mit CSS darstellen soll und nicht mit Tabellen(ausser halt Datentabellen) und da mir CSS normalerweise Spass macht, wollte ich aber hier auch keine Tabelle verwenden. Meine CSS sieht momentan so aus:

.rahmen {
border:1px solid black;
width:400px;
}

.box1 {
background-color:#fff111;
border:1px solid black;
}

.box2 {
float:left;
padding:5px;
}

.box3 {
margin-left:300px;
}

.box4 {
border:1px solid black;
float:clear;
padding:5px;
}

Und die dazugehörige HTML Datei so:
<div class="rahmen">
<div class="box1">
  <div class="box2">
  <p>Name als EMail</p>
  <p>Homepage als Link</p>
  </div>

<div class="box3">
  <p>Wohnort</p>
  <p>Datum</p>
  </div>
</div>

<div class="box4">
<p>Eintrag</p>
</div>
</div>

Das ganze ist schlussendlich für die Ausgabe eines Gästebuchs (also das was ihr nun seht, wär also ein Eintrag) gedacht. Doch jetzt hab ich folgende Probleme.
1. Irgendwie sieht das ganze mit CSS doch ziemlich scheisse aus (ok, das gelb sowieso, aber denkt euch das mal weg *g*).
2. der Text in box2 und box3 sollte eigentlich auf gleicher Höhe ausgegeben werden. Stattdessen steht in der ersten Zeile das erste Wort aus box2, dann in der nächsten Zeile das erste Wort aus Box 3, dann in der nächsten Zeile das zweite Wort aus box2..etc. Was mach ich falsch?
3. Die Tabelle lässt sich mit wesentlich weniger Zeichen schreiben als dieses ganze verschachtelte DIV-Zeugs und formatieren könnte man die Tabelle immernoch schöner per CSS. Ist in diesem Fall nun doch die Tabellendarstellung vorzuziehen und für jeden auszugebenden Gästebucheintrag eine solche tabelle ausgeben zu lassen?

Meine Nerven liegen grad total blank. Irgendwie nervt mich das. Kein Wunder gibts noch unzählige Leute die mit Tabellen layouten statt mit CSS.

Besten Dank im Voraus
tattergreis

[pad8626]

<div id="box" style="width:100px; height:100px; border:1px solid #FFFF33; position:absolute;">
   <div id="oben" style="height:20px;">
    <div id="obenlinks" style=" width:50%; position:absolute; left:0%;">
    </div>
    <div id="oben_rechts" style=" width:50%; position:absolute; right:0%;">
    </div>
   </div>

<div id="unten" style="width:100%;"></div>
  </div>

Probiers mal damit ich denk mal das kommt ungefähr so hin wie du es möchtest.

[Alekz]

<div id="box" style="width:100px; height:100px; border:1px solid #FFFF33; position:absolute;">
   <div id="oben" style="height:20px;">
    <div id="obenlinks" style=" width:50%; position:absolute; left:0%;">
    </div>
    <div id="oben_rechts" style=" width:50%; position:absolute; right:0%;">
    </div>
   </div>

<div id="unten" style="width:100%;"></div>
  </div>

Probiers mal damit ich denk mal das kommt ungefähr so hin wie du es möchtest.

Eine wirklich sehr unschöne Lösung, ich gebe da den spontanen Tipp: 1. Box (links oben) ein "float: right" geben, damit alles Nachfolgende rechtsbündig sitzt, der zweiten Box (recht oben), ein "clear: both" geben, somit wird der textfluch ab hier umgebrochen.

Alekz

[tattergreis]

Eine wirklich sehr unschöne Lösung, ich gebe da den spontanen Tipp: 1. Box (links oben) ein "float: right" geben, damit alles Nachfolgende rechtsbündig sitzt, der zweiten Box (recht oben), ein "clear: both" geben, somit wird der textfluch ab hier umgebrochen.

Alekz

Hi!

Ist das nun auf meine Vorlage bezogen oder auf die von pad? Wenn auf meine: Meinst nicht bei der Box links oben (box2) ein "float: left" (sonst würd sich ja das was oben links ist nach rechts verschieben über das "oben rechts div" (box3). Und wenn ich in der box3 (rechts oben) "clear:both" angeb hat dies die Wirkung, dass die box3 zwar rechts ist, aber erst unterhalb der box2 beginnt.

Bei der Vorlage von pad bewirken die Änderungen nicht wirklich was. Aber ich find die Vorlage von pad im Vergleich zu meiner eher noch schlimmer... sorry pad ;) (und danke trotzdem)

greetz
tattergreis

[Benjamin Buxbaum]

Hi!

2. der Text in box2 und box3 sollte eigentlich auf gleicher Höhe ausgegeben werden. Stattdessen steht in der ersten Zeile das erste Wort aus box2, dann in der nächsten Zeile das erste Wort aus Box 3, dann in der nächsten Zeile das zweite Wort aus box2..etc. Was mach ich falsch?

Wenn du box2 ein padding von 5px gibst, box3 hingegen nicht, brauchst du dich nicht wundern, wenn der Inhalt der beiden divs nicht auf gleicher Höhe ist ;-)

mfG

[Benjamin Buxbaum]

Hi!

Hmm, ich sehe gerade, dass der liebe IE da offenbar noch ein anderes Problem hat.

mfG

[Benjamin Buxbaum]

Hi!

Hmm, ich sehe gerade, dass der liebe IE da offenbar noch ein anderes Problem hat.

body {
width:100.01%;
}

.rahmen {
border:1px solid black;
width:400px;
}

.box1 {
background-color:#fff111;
border:1px solid black;
width:100%;
}

.box2 {
float:left;
}

.box3 {
margin-left:200px;
}

.box4 {
border:1px solid black;
float:clear;
width:100%;
}

.box2 p,.box3 p,.box4 p {
margin:5px;
}

Das sollte in etwa so aussehen, wie du es möchtest.

mfG

[tattergreis]

Das sollte in etwa so aussehen, wie du es möchtest.

mfG

Tut es! :)

Dankeschön!

mfg