Zweispalter

[Gaga]

Moin,

Zweispalter gibt's wie Sand am Meer, aber wie bekomme ich so einen hin?

|-50%-------------------------------|..|-50%--------------------------------
                                       |-a px-----------|

Alice fing an sich zu langweilen; sie  Hier_kommt_was_hin
saß schon lange bei  ihrer  Schwester  von__a_px__Breite.
am  Ufer  und  hatte  nichts zu thun.
Das  Buch, das  ihre  Schwester  las,
gefiel  ihr  nicht;   denn  es  waren
weder  Bilder  noch Gespräche  darin.
 »Und  was  nützen  Bücher,«   dachte
Alice, »ohne  Bilder  und Gespräche?«

Sie überlegte sich eben, (so  gut  es         Hier
ging, denn sie war schläfrig und dumm         kommt
von der Hitze,) ob es  der Mühe werth          was
sei  aufzustehen und Gänseblümchen zu      Schmaleres,
pflücken,  um  eine  Kette  damit  zu       zentriert
machen,  als  plötzlich   ein  weißes       in  a px.
Kaninchen  mit  rothen Augen dicht an
ihr vorbeirannte.

Beide Spalten teilen sich die Breite halbe-halbe. Während allerdings die linke Spalte ihre Hälfte im Blocksatz voll ausfüllt, ist der _Inhalt_ der rechten nur ein festes, bekanntes Pixel-Maß breit (hier: a px). Der Inhalt ist in der Regel schmaler als die Seitenhälfte, er soll linksbündig an die Seitenmitte anliegen. Und zu allem Überfluss sollen alle noch schmaleren Inhalte innerhalb des Maßes zentriert sein.

Vertikal erhalten die Inhalte der rechten Spalte ihre Position aus dem Inhalt der linken Spalte. Im Beispiel oben zu sehen liegen die Inhalte rechts jeweils auf Höhe eines Absatzbeginns links.
(nb: Die Höhe der einzelnen Blöcke links wie rechts ist nicht bekannt, die Blöcke dürfen sich nicht überlappen; position:absolute für die rechte Spalte fällt daher weg.)

Im Moment sieht es so aus:

<p class="rechts"></p>
<p></p>
<p class="rechts"></p>
<p></p>

p {
  width:50%;
}

p.rechts {
  float:right;
  clear:right;
  text-align:left;
}

Damit habe ich die zwei Spalten, die Blöcke bleiben grafisch brav untereinander und sind HTML-seitig auch anständig sortiert.

Das Problem ist die Zentrierung der Inhalte rechts. Dazu müsste p.rechts die besagte feste Breite bekommen, womit die komplette rechte Spalte jedoch an den rechten Rand der Seite wandert, anstatt sich an die Seitenmitte anzuschmiegen.

Gibt es eine Lösung für die Problematik, außer, in .rechts ein unelegantes Hilfs-div von a px Breite einzubauen?

[bleicher]

Grüße,
wieso nimmst nicht divs?
3 davon reichen
link, rechts, im rechtren
MFG
bleicher

[bleicher]

Grüße,
wobei auch p's gehen müssen - ich verstehe bloß den floar:right bei dir nciht, wo es eindeutig links floaten soll?
MFG
bleicher

[Gaga]

Hallo,

danke für die Antwort.

3 davon reichen
link, rechts, im rechtren

Ich wollte gern vermeiden, in der rechten Spalte HTML-Elemente einzusetzen, die nur der Darstellung dienen, nicht dem Inhalt.

Der Code

<div class="rechts">
  <p>
    Zwei Worte
  </p>
</div>
<p>
  Linker Fließtextabsatz.
</p>
<p>
  Linker Fließtextabsatz.
</p>
<div class="rechts">
  <p>
    <img alt="Abbildung zum nachfolgenden Absatz">
  </p>
</div>
<p>
  Linker Fließtextabsatz.
</p>

zusammen mit

p {
  width:50%;
}
div.rechts {
  float:right
}
div.rechts > p {
  width:[feste Breite]
  text-align:center;
}

ginge wohl, die div.rechts, die nichts weiter machen als ein einzelnes Element zu umklammern, finde ich aber irgendwie unschön.

ich verstehe bloß den floar:right bei dir nciht, wo es eindeutig links floaten soll?

Nein, der Fließtext der linken Spalte läuft normal, die Elemente der rechten Spalte sind rechts herausgestellt, ergo float:right.

[bleicher]

Grüße,

Nein, der Fließtext der linken Spalte läuft normal, die Elemente der rechten Spalte sind rechts herausgestellt, ergo float:right.

hä? entschuldige verstehe ich nicht

dennoch - du kannst dem rechten p die breite 50% und dem linken Npx zuweisen, und mit float "left" soweit ich überhaupt was von verstehe
text-align:center und blocksatz stören sich da nicht

nebenbei - es ist nicht empfehlenswert den blocksatz zu verwenden - vor allem bei dynamisch erzeugten texten.
MFG
bleicher