|
|||
Probleme mit 3 spalten
hi, ich habe eine ein problem! ich habe ein design mit 3 spalten gemacht.
erstaml links die navigation mitte der inhalt und rechts eine info spalte. ich habe die spalten(natürlich) mit den divs gemacht. also Code:
<div id="links"></div> <div id="mitte"></div> <div id="rechts"></div> Code:
<div id="rahmen"> <div id="links"></div> <div id="mitte"></div> <div id="rechts"></div> </div> die spalten sind so formatiert: Code:
#links { padding:0px; margin:0px; background-color:#f5f5f5; float:left; } #mitte { padding:0px; margin:0px; background-color:#ffffff; width:480px; float:left; } #rechts { padding:0px; margin:0px; width:150px; background-color:f5f5f5; border:0px; float:right; } #rahmen { padding:0px; margin:0px; background-color:#f5f5f5; width:760px; float:left; } gruß luk |
Sponsored Links |
|
|||
meinst Du, dass die Höhe eines DIVs sich nicht danach richtet wenn ein anderer "wächst"?
Das ist normal und nicht möglich zu umgehen. Such mal nach "Faux columns" als Stichwort oder schau hier wie man das -zumindest in der Darstellung- lösen kann: http://www.byteshift.de/alistapart/fauxcolumns/ ansonsten solltest Du nach dem floaten auch clearen. Wozu hat der Rahmen ein float:left? Soll der linksbündig sein? Dann benutz doch margin, bzw. text-align im body für den IE. |
Sponsored Links |
|
|||
Wenn sich nur die Mitte und die rechte Seite an die linke anpassen sollen, hab ich ne Lösung für dich.
html: Code:
<div class="alles"> <div class="rechts"> rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts </div> <div class="clearfix"> <div class="links"> Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links </div> Mitte Mitte </div> </div> Code:
body{padding:0; margin:0; border:0;} .clearfix {float:none; margin-right:150px; background-color:#f00; display: block; } * html .clearfix {height: 1%; margin-right:-3px;} .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .links {float:left; background-color:#ff0; width:130px; margin:0;} .alles:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .alles {display: block; background-color:#00f; width:760px;} * html .alles {height: 1%;} .rechts {float:right; width:150px; background-color:#00f; margin:0; text-align:left;} *html .rechts {margin:0 0 0 -3px;}
__________________
Ich habe keine Ahnung, aber davon \'ne Menge |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
3 Spalten Layout | Probleme bei Hintergrundbild | MoDub | CSS | 4 | 21.06.2010 14:19 |
3 Spalten, linke Spalte unten ausrichten - Probleme im IE6 | Mahoney | CSS | 5 | 31.03.2010 12:02 |
validiertes CSS 2 spalten layout mit header und footer macht probleme | ASB | CSS | 4 | 31.07.2007 08:37 |
Probleme mit min-height, automatische Anpassung der height anderer Spalten | mkuegle | CSS | 5 | 01.06.2006 18:42 |
div 100% & mehrere Spalten und Probleme mit Seitlichem R | xm22 | CSS | 1 | 12.02.2006 14:08 |