Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
tob1as
Threadersteller
Dabei seit: 20.08.2007
Ort: Zürich
Alter: -
Geschlecht:
|
Verfasst Sa 26.01.2008 14:11
Titel CSS-Problem mit 3-spaltigem Layout |
|
|
Hallo allerseits
Ich habe ein Problem mit meinem CSS-File. Ich habe eine kleine Seite erstellt, bei welcher der Inhaltsteil im div "content" bestimmt wird. Ich habe darin 3 Spalten, wobei der Hauptinhalt in die mittlere "cont_center" kommt.
Der Code ist so aufgebaut:
Code: | #content {
width:1109px;
min-height:414px;
height:auto !important;
height:414px;
margin: 2px 0px 0px 6px;
}
#cont_left {
width:180px;
min-height:412px;
height:auto !important;
height:412px;
background-color: #e1dfe0;
float:left;
position: absolute;
}
#cont_center {
width:240px;
min-height:412px;
height:auto !important;/
height:412px;
background-color: #eae8e9;
margin: 0px 4px 0px 182px;
position: absolute;
padding-left:5px;
padding-right:5px;
}
#cont_right {
clear: both;
width:667px;
min-height:412px;
height:auto !important;
height:412px;
background-color: #eeebec;
margin: 0px 4px 0px 434px;
padding-top:0.3px;
padding-left: 5px;
padding-right: 5px;
position:absolute;
}
|
Ich möchte nun, dass diese alle nebeinander sind, was momentan leider noch nicht der Fall ist, die rechte rutscht irgendwie immer runter. Ausserdem sollten alle immer gleich hoch sein, also dynamisch je nach Inhaltslänge im cont_center.
Wäre super wenn ihr mir dabei ein wenig helfen könntet, ich hab jetzt schon etliche Tutorial-Lösungen verwendet, doch funktionierte es mit meinem CSS leider nicht.
Lieber Gruss
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 26.01.2008 14:54
Titel Re: CSS-Problem mit 3-spaltigem Layout |
|
|
tob1as hat geschrieben: | Ich möchte nun, dass diese alle nebeinander sind, was momentan leider noch nicht der Fall ist, die rechte rutscht irgendwie immer runter. |
Code: | div#left,
div#center,
div#right {
float: left;
width: _ ;
} |
Zudem, Google: "clearing Floats"
tob1as hat geschrieben: | Ausserdem sollten alle immer gleich hoch sein, also dynamisch je nach Inhaltslänge im cont_center. |
Ist nicht möglich. Workarounds wären Javascript oder besser "faux columns".
|
|
|
|
|
Anzeige
|
|
|
bluecafe
Dabei seit: 04.03.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 26.01.2008 15:12
Titel
|
|
|
Weshalb gibts du dem mittleren Container ein position: absolute?? Der Sinn von float ist es doch, dass dann der mittlere Container in den Zwischenraum zwischen links und rechts rein'floaten' kann und nicht mit position absolute platziert wird. Dem content center brauchst du dann auch keine Weite zu geben, denn die passt sich dann automatisch dem Rest an, der zwischen float:left und float:right übrig bleibt. Versuche es nochmal ohne position:absolute und ohne Weitenangabe für das mittlere div. Außerdem - wenn ich es jetzt im Kopf auf die Schnelle richtig gerechnet habe - sprengen die Weiten der drei inneren Container die Weite des umfassenden Containers. Dann ist es kein Wunder, wenn eine Box nach unten rutscht.
P.S. ich sehe gerade du hast dem linken ja auch noch ein position absolute gegeben. Entweder position absolute oder float, aber beides zusammen passt nicht. Und dem rechten Container musst du dann natürlich noch ein float:right mitgeben.
Hier mal eine Vorlage: http://www.html-seminar.de/dreispaltiges-layout-in-css.htm
Zuletzt bearbeitet von bluecafe am Sa 26.01.2008 15:19, insgesamt 3-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Probleme bei 3-Spaltigem YAML mit IE6
mit InDesign (CS&) 2-spaltige Fußnoten in 1-spaltigem Text?
layout problem
css layout problem
Hab da ein Problem - Layout
Problem bei CSS-Layout
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|