3 spalten Layout

[crowl]

Ich möchte mittels CSS ein drei Spalten-Layout erstellen. Links, Mitte und Rechts. Dabei soll der Abstand zum oberen Rand des Browser 1.5em betragen.

Mein Code sieht so aus:
#links  { width:20%; position:absolute; top:1.5em; }
#mitte  { margin-left:22%;}
#rechts { width:20%; float:right;}

bei #links ist es genauso wie ich es haben möchte, aber bei #mitte ist der Text zu nah am oberen Rand, und bei #rechts ist er ein ganzes stück weiter unten.

Wie bekomme ich es hin, dass die Texte alle auf der gleichen horizontalen Höhe beginnen?

Bei mir sieht es so aus:

+--------------------+
+       mitte        +

• links              +
  +             rechts +
  +                    +
  +--------------------+

Ich möchte es aber so haben:

+--------------------+
+                    +

• links mitte rechts +
  +                    +
  +                    +
  +--------------------+

Kann ich mittels CSS sagen, dass keine Spalte in ihrer Breite kleiner als 100px werden darf?

[comunicout]

hi,
ääähhmmmm

Mein Code sieht so aus:
#links  { width:20%; position:absolute; top:1.5em; }
#mitte  { margin-left:22%;}
#rechts { width:20%; float:right;}

wie wäre es die TOP-angabe auch bei #mitte und #rechts anzuwenden ?!

mfg
comunicout

[crowl]

wie wäre es die TOP-angabe auch bei #mitte und #rechts anzuwenden

bei mir funktioniert weder
#links  { width:20%; position:absolute; top:1.5em; }
#mitte  { margin-left:22%; top:1.5em; }
#rechts { width:20%; float:right; top:1.5em; }

noch

#links  { width:20%; position:absolute; top:1.5em; }
#mitte  { margin-left:22%; position:absolute; top:1.5em; }
#rechts { width:20%; float:right; position:absolute; top:1.5em; }

[Susanne Jäger]

Hallo Crowl,

Dir gehen da einige Konzepte durcheinander.
top funktioniert nur in zusammenhang mit position. Sonst brauchst du margin, padding ...
float und position absolute in einer Angabe widersprechen sich. entweder oder.

Wenn es dir nur darum geht drei Spalten nebeneinander darzustellen könntest du alles floaten zu lassen:
body {padding-top: 1.5em;}
#links {float: left; width: 20%; }
#mitte {float: left; width: 22%; }
#rechts {float: left; width: 20%; }

In der Regel gibt es aber auch noch Anforderungen an Header oder Footer-Bereiche.

Eine Liste mit Links zu verschiedensten (z.Zt. sinds 28) Möglichkeiten  ein drei Spalten-Layout mit allen Finessen zu erreichen gibts im Wiki der amerikanischen CSS-Discuss-Mailingiste
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Auch wenn englisch vielleicht schwierig ist empfiehlt es sich allemal sich von diesen Ansätzen inspirieren zu lassen. Die Aufgabe ist browserübergreifend lösbar, aber abhängig vom Drumrum läßt sich die Lösung nicht unbedingt aus dem Ärmel schütteln.

Gruß Susanne

[crowl]

Danke Susanne,

der Link ist super. Gerade da ich eine Browserübergreifende Lösung brauche.

Gruß Crowl

[Gunnar Bittersmann]

Ich möchte mittels CSS ein drei Spalten-Layout erstellen. Links, Mitte und Rechts. Dabei soll der Abstand zum oberen Rand des Browser 1.5em betragen.

Mein Code sieht so aus:
#links  { width:20%; position:absolute; top:1.5em; }

^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Wozu das? Nimm doch margin-top, dann ist die absolute Positionierung überflüssig.

#links  { width:20%; position:absolute; top:1.5em; }

^^^^^^^^^

#mitte  { margin-left:22%;}

^^^^^^^^^^^^^^^
Die divs (nehm ich an) bekommst du besser mit float:left nebeneinander. Dann brauchst du nicht zwei voneinander abhängige Angaben.

Kann ich mittels CSS sagen, dass keine Spalte in ihrer Breite kleiner als 100px werden darf?

Denke schon, aber ob das alle Browser verstehen?
Gunnar