teilweise variable spaltenbreite mit css festlegen

[sirius6b]

Hallo,

ich habe ein kleines Problem mit meinem Verständnis von CSS ...

Mit der alten, "bösen" html-Schreibweise hatte ich eine folgendermaßen aufgebaute Tabelle:

<table border="1" width="100%">
  <tr>
    <td width="200">test</td>
    <td width="*">test</td>
  </tr>
</table>

Die erste Spalte war jetzt 200 Pixel breit und die zweite hat den Rest des Platzes eingenommen.

Ich möchte das gleiche jetzt mit xhtml, css und div nachbauen. Mir stellt sich nur die Frage: Wie?

Ein Ansatz:

CSS:
----------------------
#left {
  width:200px;
  float:left;
}
#right {
  width:100%;
  float:left;
}
----------------------

html:
----------------------
<div id="left">
  inhalt
</div>
<div id="right">
  inhalt
</div>
<br style="clear:left;" />
----------------------

Das ganze klappt aber nicht, #right bekommt 100% des Elternelements zugesprochen und wird deswegen unterhalb von #left angeordnet.

Wenn ich #left z.B. 20% und #right 80% Breite gebe wird #left entweder zu breit oder zu schmal, je nach Auflösung, und damit nutzlos.

Fällt euch ein was ich übersehen habe? Wie krieg ich das Problem in den Griff?

[Thomas Luethi]

Hallo,

<td width="*">test</td>

Der Stern war aber AFAIK in TD nicht valide...
(Framesets sind was anderes.)

#left { width:200px;  float:left; }
#right { width:100%; float:left; }
Das ganze klappt aber nicht, #right bekommt 100% des Elternelements zugesprochen und wird deswegen unterhalb von #left angeordnet.

Du sagst ja auch, dass es 100% breit sein soll...

Fällt euch ein was ich übersehen habe? Wie krieg ich das Problem in den Griff?

Da der div#right ja in der Breite flexibel sein soll,
darfst Du ihm keine Breite geben. Somit kannst
Du ihn auch nicht floaten.

Versuch's mal mit:
#left { width:200px;  float:left; }
#right { margin-left:205px; }

Ein einfaches 2-Spalten-Layout, das sogar in Netscape 4
funktioniert, und bei dem die linke Spalte 220px ist, gibt's hier:
http://realworldstyle.com/2col.html

Ein paar Beispiele mit 2 und mehr Spalten gibt's hier:
http://glish.com/css/

Gruesse,

Thomas

[MudGuard]

Hi,

<td width="*">test</td>
Der Stern war aber AFAIK in TD nicht valide...

Richtig. Bei td hat width den Datentyp length, bei col dagegen den Typ multi-length (womit der * erlaubt ist).

cu,
Andreas

[sirius6b]

Hi,

Versuch's mal mit:
#left { width:200px;  float:left; }
#right { margin-left:205px; }

spricht was gegen
#left { width:200px; float:left; }
#right ( margin-left:10px; float:left; }
? finde ich fast einfacher.

Ein einfaches 2-Spalten-Layout, das sogar in Netscape 4
funktioniert, und bei dem die linke Spalte 220px ist, gibt's hier:
http://realworldstyle.com/2col.html

Wunderbar! Dankeschön :-)

Ein paar Beispiele mit 2 und mehr Spalten gibt's hier:
http://glish.com/css/

Hm... sieht interessant aus :-) gleich mal ausprobieren :-)

Dankeschön!

[MudGuard]

Hi,

spricht was gegen
#left { width:200px; float:left; }
#right ( margin-left:10px; float:left; }
? finde ich fast einfacher.

Ja. Bei float muß eine explizite Breitenangabe erfolgen.

cu,
Andreas

[sirius6b]

Hi,

Ja. Bei float muß eine explizite Breitenangabe erfolgen.

OK, überredet :-)

Dankeschön!

[Thomas Luethi]

Hallo,

Ja. Bei float muß eine explizite Breitenangabe erfolgen.

Das schrieb ich eigentlich schon in [pref:t=65443&m=372605] .
Und auch, dass er float nicht anwenden kann,
weil er die Breite nicht festlegen will...
(Offenbar war ich nicht deutlich genug ;-)

Gruesse,

Thomas

[sirius6b]

Hi,

Das schrieb ich eigentlich schon in [pref:t=65443&m=372605] .
Und auch, dass er float nicht anwenden kann,
weil er die Breite nicht festlegen will...
(Offenbar war ich nicht deutlich genug ;-)

tatsächlich... ich hatte es nicht verstanden... sorry für den Mehraufwand :-)

Ciao,
sirius6b

[MudGuard]

Hi,

Das schrieb ich eigentlich schon in [pref:t=65443&m=372605] .

Naja, die Werbefuzzis sagen, daß die Werbebotschaft mind. 7 Mal beim User aufschlagen muß, bis sie ankommt.
Warum sollte es mit technischen Fakten anders sein?

cu,
Andreas

[at]

Hallo.

Naja, die Werbefuzzis sagen, daß die Werbebotschaft mind. 7 Mal beim User aufschlagen muß, bis sie ankommt.
Warum sollte es mit technischen Fakten anders sein?

Oder anders: Sobald es der Fachmann nicht mehr hören mag, hat es der Laie ansatzweise verstanden. Zur Beweisführung dient der übliche zeitliche Verzug bei politischen Entscheidungen, die EDV betreffen: Sobald eine Technik oder Herangehensweise überholt ist und die darauf basierenden Produkte veraltet sind, wird sie eingesetzt.
MfG, at