CSS: Drei Spalten mit <div> (px,%,px) oder Alternative <table>?

[Joker]

Ich versuche bereits seit einem Tag, drei <div>-Elemente nebeneinander zu platzieren. Das linke und das rechte Element soll 250 Pixel breit sein und das mittlere soll die Lücke zwischen den beiden dynamisch füllen. Ich habe bereits Versuche mit margin, float, position und width:auto/100% gemacht, diese scheiterten jedoch.
Wie kann ich nun so etwas definieren?

Das geplante Layout ist für mich mit Tabellen lösbar, aber ich lese öfters, dass Tabellen nicht als Layout missbraucht werden sollen. Aus welchem Grund eigentlich? Sind Tabellen-Tags "deprecated"-gefährdet?
Kann man mit <div>s auch Layoutstrukturen erstellen, die genau so wie (zum Teil dynamische) Tabellen, die auf rowspan und colspan basieren, aussehen, erstellen? Oder sollte ich lieber die Tabellen-Variante benutzen?

[Raiden]

Ich versuche bereits seit einem Tag, drei <div>-Elemente nebeneinander zu platzieren. Das linke und das rechte Element soll 250 Pixel breit sein und das mittlere soll die Lücke zwischen den beiden dynamisch füllen. Ich habe bereits Versuche mit margin, float, position und width:auto/100% gemacht, diese scheiterten jedoch.
Wie kann ich nun so etwas definieren?

Das geplante Layout ist für mich mit Tabellen lösbar, aber ich lese öfters, dass Tabellen nicht als Layout missbraucht werden sollen. Aus welchem Grund eigentlich? Sind Tabellen-Tags "deprecated"-gefährdet?
Kann man mit <div>s auch Layoutstrukturen erstellen, die genau so wie (zum Teil dynamische) Tabellen, die auf rowspan und colspan basieren, aussehen, erstellen? Oder sollte ich lieber die Tabellen-Variante benutzen?

Mit Tabellen wäre dies zwar lösbar, es besteht jedoch das Problem, dass Tabellen (wenn du sie mit % machst), je nach Auflösung variieren (wenn nicht, bitte verbessern. Bin mir aber sicher).

Du könntest das ganze mit CSS (Cascading Style Sheets) lösen (wenn das in Counter Strike möglich ist).

Viel Spaß :)

[CamperFake]

Mit Tabellen wäre dies zwar lösbar, es besteht jedoch das Problem, dass Tabellen (wenn du sie mit % machst), je nach Auflösung variieren (wenn nicht, bitte verbessern. Bin mir aber sicher).

Du könntest das ganze mit CSS (Cascading Style Sheets) lösen (wenn das in Counter Strike möglich ist).

Viel Spaß :)

Ich glaub er meint damit nicht Counter Strike: Source. :lol:
Oder doch?

[Joker]

Mit Tabellen wäre dies zwar lösbar, es besteht jedoch das Problem, dass Tabellen (wenn du sie mit % machst), je nach Auflösung variieren (wenn nicht, bitte verbessern. Bin mir aber sicher).
Gerade das meine ich mit dynamisch. Es ist geplant, dass sich das Layout nach der Auflösung des Fensters anpasst. Doch gerade das verursacht mein Problem, denn 100% bezieht sich im style-Tag auf die Fensterbreite und nicht auf die Lückenbreite.


Du könntest das ganze mit CSS (Cascading Style Sheets) lösen (wenn das in Counter Strike möglich ist).
Lolwut. Von CS:S ist hier nicht die Rede. Und gerade, wie man es in CSS lösen kann, ist die Frage.

Ich würde es bevorzugen, es mit Tabellen zu machen, jedoch bin ich mir nicht mit dessen Nachteilen bewusst. Da es anscheinend auch mit <div> lösbar ist, vermute ich, dass Tabellen deprecated-gefährdet sind. Deshalb die zweite Frage.

[Raiden]

Lolwut. Von CS:S ist hier nicht die Rede. Und gerade, wie man es in CSS lösen kann, ist die Frage.

Uhm... sorry, hab mich verlesen.

[LoC]

Tabellen werden natürlich nicht plötzlich aus dem HTML Standard verschwinden. Es geht bei dem Thema darum, dass Tabellen möglichst für tabellarische Inhalte genutzt werden sollen und nicht für das Layout.

Bei deinem spezifischen Problem, denke ich dass du die Sache einfach falsch angegangen bist. Das ganze ist nicht kompliziert zu lösen. Du brauchst eigentlich nur drei <div> Elemente, wobei den beiden an der linken und rechten Seite jeweils die feste Breite von 250px und float left bzw right übergibst. Das <div> Element in der Mitte braucht keine Breite, es reicht aus, diesem links und rechts einen entsprechenden Außenabstand (margin) von mehr als 250px zu geben. Sollte so eigentlich hinhauen.

[Joker]

Danke, aber mit folgendem Code:

<html>
<body style="margin:0">
<div style="width:250px; height:250px; background-color:red; float:left"></div>
<div style="margin-left:250px; margin-right:250px; height:250px; background-color:green"></div>
<div style="width:250px; height:250px; background-color:blue; float:right"></div>
</body>
</html>
erhalte ich links eine 250px breite rote Box, in der Mitte eine grüne dynamische Box und rechts, aber erst in der nächsten "Zeile", die grüne Box. Kurz: Alles funktioniert bis auf die rechte Box, die exakt unter ihrem geplanten Platz liegt.

ASCII-Bild zur Veranschaulichung:


|¯¯|¯¯¯¯¯|
|__|_____|
|¯¯|
|__|

EDIT: Mit margin-top:-250px lässt sich das lösen. Ich weiß aber nicht, ob es die geeignete Lösung ist.

[LoC]

Das float Attribut bezieht sich auf das oder die nachfolgenden <div> Element(e). Daher musst du den Container mit dem "float:right" im Code weiter vorne platzieren:

<html>
<body style="margin:0">
<div style="width:250px; height:250px; background-color:red; float:left"></div>
<div style="width:250px; height:250px; background-color:blue; float:right"></div>
<div style="margin-left:250px; margin-right:250px; height:250px; background-color:green"></div>
</body>
</html>

[Joker]

Das hat geholfen, vielen Dank.

Wie kann ich dasselbe nun senkrecht machen? Also den oberen und den unteren Block 250px hoch und das mittlere dynamisch hoch?
Ich habe es auf die Schnelle selbst versucht. Kam aber zu keinem erfolgreichen Ergebnis, da float nur horizontal beeinflussen und position anscheinend die %-Größe nicht beeinflusst. Das Block, in dem sich die senkrechten Blöcke befinden, ist 700px hoch, aber das dynamische Block selbst (100%) ist auch 700px hoch, trotz eigener Versuche mit position oder float.

EDIT: Funktioniert alles. Danke.