variables drei spalten layout

[hello]

hallo zusammen

ich möchte ein variables dreispallten layout machen in html, ansich nicht so ein problem, wen da so ein paar details nicht währen:

hier mal ein bisschen vereinfacht das html

<div id="wrapper">
<div id="right"></div>
<div id="left"></div>
<div id="main"></div>
</div>

jetzt habe ich per css den wrapper zentriert und auf eine breite von 1000px gesetzt
dan habe ich den #right rechts gefloatet und den #left links gefloatet und das #main gar nicht gefloatet
im anhang ein bild wie das mit ein bisschen inhalt etwa aussieht

jetzt seht ihr das der text im #main unterhalb des #right und #left weiter gehen, aber die sollten dort nicht einrücken sondern gerade weiter gehen, jetzt dachte ich ich könnte das #right und #left irgendwie auf die höhe des #main setzen, aber wie mach ich das?

 

[creative7even]

probier doch mal den YUI-Grid-Builder...

 

[hello]

ist ein intressantes ding diser grid-builder, aber der hilft mir hier nicht weiter... ich möchte ja nicht etwas neues machen sondern nur dieses problem lösen...

 

[Nathea]

Vielleicht hilft Dir der Quelltext hier oder hier weiter?

 

[grindking]

hallo zusammen

ich möchte ein variables dreispallten layout machen in html, ansich nicht so ein problem, wen da so ein paar details nicht währen:

hier mal ein bisschen vereinfacht das html

<div id="wrapper">
<div id="right"></div>
<div id="left"></div>
<div id="main"></div>
</div>

jetzt habe ich per css den wrapper zentriert und auf eine breite von 1000px gesetzt
dan habe ich den #right rechts gefloatet und den #left links gefloatet und das #main gar nicht gefloatet
im anhang ein bild wie das mit ein bisschen inhalt etwa aussieht

jetzt seht ihr das der text im #main unterhalb des #right und #left weiter gehen, aber die sollten dort nicht einrücken sondern gerade weiter gehen, jetzt dachte ich ich könnte das #right und #left irgendwie auf die höhe des #main setzen, aber wie mach ich das?

Wenn ich das oben richtig interpretiert habe, solltest du den Elementen noch jeweils eine Breite geben.

Bsp.

body {
margin:auto;
padding:0;
}

#wrapper {
width:1000px;
}

#main {
float:left;
width:500px;
}

#left {
float:left;
width:250px;
}

#right {
float:right;
width:250px;
}

Ich habs selbst nicht getestet aber sollte daran liegen. Falls man die Seite online betrachten kann, wäre das natürlich nützlich.

Es gibt natürlich diverse Möglichkeiten wie du ein Dreispaltenlayout aufziehen kannst. Du könntest das Ganze auch mit position:absolute; aufgleisen.

Gruss

 

[maery]

ich mach sowas nur noch mit grid frameworks zum beispiel: 960.gs - das erspart viel arbeit und mühe - und vor allem zeit und ärger.

 

[Witti]

Wirf mal einen Blick auf YAML: http://www.yaml.de/

 

[hello]

danke für die vielen antworten. also @Nathea der erste dieser links ist schon zimlich ähnlich mit dem was ich meine, aber zum schnell erklähren was das genau soll: links und rechts werden dan module rein kommen, ähnlich wie bei joomla, diese module haben aber zum teil verschiedene breiten (vorallem auf der rechten seite). jetzt damit ich nicht bei jedem modul das css verändern muss wollte ich es irgendwie so hinkriegen, dass sich #left und #right die grösse des moduls drinnen annehmen und dan sich das #main dazwischen anpasst. aber liege ich richtig, dass dies so einfach nicht möglich ist?

 

[Synoxis]

Schau mal hier, dort gibts einige Tipps dazu.