Zwei divs oder span nebeneinander

[Pete]

Hallo,

bislang habe ich mich um css weitesgehend herumgedrückt, da vieles mit Tabellen einfacher und schneller zu codieren geht. Jetzt habe ich es aber versucht und stecke fest.

Von der Idee her möchte ich folgendes:

Eine Tabelle mit zwei Spalten, wobei die linke Spalte nur so groß ist wie ihr Inhalt und die rechte Spalte den restlichen Platz bekommt.

Irgendwie so etwas:

<div class="main">
<span class="left">Links</span><span class="right">Rechts</span>
<span class="left">Links</span><span class="right">Rechts</span>
<span class="left">Links</span><span class="right">Rechts</span>
<span class="left">Links</span><span class="right">Rechts</span>
</div>

oder vielleicht so?

<div class="main">
<div>
     <span class="left">Links</span><span class="right">Rechts</span>
</div>
<div>
     <span class="left">Links</span><span class="right">Rechts</span>
</div>
<div>
     <span class="left">Links</span><span class="right">Rechts</span>
</div>
<div>
     <span class="left">Links</span><span class="right">Rechts</span>
</div>
</div>

Den Rest mit den Farben und so, bekomme ich dann bestimmt schon hin, da das einfacher ist. Aber das Positionieren ist eine heikle Angelegenheit.

Pete

[nag]

Hallo,

ganz einfaches Beispiel:

<div style="width:200px; float:left;">
...inhalte...links...
</div>

<div>
...inhalte...rechts...
</div>

mfg NAG

[ichen]

Moin!

<div style="width:200px; float:left;">
...inhalte...links...
</div>

<div style="margin-left:200px;">

^^^^^^^^^^^^^^^^^^^^

...inhalte...rechts...
</div>

das ist nicht zu vergessen, sonst kommt das tabellenlayout nicht zu stande, weil der variable div um den festgelegten div fließt, sobald in dem festgelegten der content kürzer ist, als der das variablem
tschüs ichen

[Pete]

<div style="width:200px; float:left;">
<div style="margin-left:200px;">

Macht ja wohl die gleichen Probleme wie oben. Die Breite der linken Spalte wird vom Browser festgelegt und nicht von mir. Ich kann also gar nicht wissen, ob 200px ausreichen. Es soll so breit sein, wie der Inhalt ist. (Soll eine navigation sein.)

Pete

[ichen]

Moin!
ich habe jetzt verstanden, was du möchtest.

<div style="width:100%;">
 <div style="float:left;">Menü</div>
 <div>content</div>
</div>

hier ist jedoch noch das prob vorhanden, dass es wieder der längere content um das menü fließt.

tschüss ichen

[Marc]

Moin moin

<div style="width:100%;">
 <div style="float:left;width:10em;">Menü</div>
 <div style="margin-left:12em;">content</div>
</div>

hier ist jedoch noch das prob vorhanden, dass es wieder der längere content um das menü fließt.

So (s. o.) gehts - die Breiten-Angaben (width und margin) lassen sich natürlich anpassen, der 2em-Abstand ist gewollt, damit der Test nicht direkt an das Menü geklatscht wird - trotzdem an den OP - das ist ncoh das leichteste von tabellenfreiem Layout. Die Tücke liegt im Detail. Dafür ist mehr möglich, als bei Tabellenlayouts.

Gruß,
Marc.

[Pete]

Wie wärs denn damit

<div>
<span>links</span>
<span><table><tr><td>rechts</td></tr></table></span>
</div>

Durch benutzen einer Tabelle lässt sich dass umfließen des linken span verhindern.

Pete

[MudGuard]

Hi,

Wie wärs denn damit
<div>
<span>links</span>
<span><table><tr><td>rechts</td></tr></table></span>
</div>

span als inline-Element darf kein block-Element wie table enthalten.

cu,
Andreas

[Ingo Turski]

Hi,

Durch benutzen einer Tabelle lässt sich dass umfließen des linken span verhindern.

wie bitte? Du willst eine Tabelle dafür verwenden und diese dann auch noch völlig verkehrt in ein inline-Element setzen? Abgesehen von diesem Unfug funktioniert Dein Codebeispiel noch nicht einmal.

freundliche Grüße
Ingo

[nag]

Hallo,

Macht ja wohl die gleichen Probleme wie oben. Die Breite der linken Spalte wird vom Browser festgelegt und nicht von mir.

"px" ist eine absolute Größe. Unabhängig der Fenstergrösse deines Browsers wird die "Spalte" immer 200px breit sein.

Der Inhalt sollte sich automatisch seinen Platzverhältnissen anpassen.
Probleme könnte es geben, wenn jemand in seinen Browsereinstellungen die Schriftgrösse seinen Bedürfnissen angepasst hat. Dann kann es passieren, das lange Wörter rechts aus der Spalte laufen können.

Um das zu verhindern kannst du die relative Einheit "em" benutzen, um die Breite und die Schriftgrösse der linken Spalte festzulegen.

lies dir dazu
http://www.1ngo.de/web/em.html
durch

mfg NAG

[Pete]

<div style="width:200px; float:left;">

Aber mit 200px habe ich eine feste Breite vorgegeben. Mein Problem ist aber, dass meine die Spaltenbreite von Browser zu Browser sich verändert. Mal reichen 11% mal brauche ich 15%.

Float:left bedeutet, das es links bleibt, oder?

Pete

[nag]

Hallo,

Aber mit 200px habe ich eine feste Breite vorgegeben. Mein Problem ist aber, dass meine die Spaltenbreite von Browser zu Browser sich verändert. Mal reichen 11% mal brauche ich 15%.

Wie hast du die Breite denn vorher bei deinem Tabellenlayout festgelegt?
Was soll die linke Spalte beinhalten?

Float:left bedeutet, das es links bleibt, oder?

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
float:left = "Element steht links und wird rechts davon von nachfolgenden Elementen umflossen."

mfg NAG

[Avalon]

ganz einfaches Beispiel:

<div style="width:200px; float:left;">
...inhalte...links...
</div>

<div>
...inhalte...rechts...
</div>

Dieses ganz einfache Beispiel wird Probleme machen, da das rechte div keine Spalte darstellt, sondern um das linke herum floatet. Abhilfe:

div style="width:200px; float:left;">
...inhalte...links...
</div>

<div style="float:left;">
...inhalte...rechts...
</div>

Gruß
Avalon