09.06.2010, 20:36
|
|||
|
|||
css mit linker festen Spalte und variabler rechter Spalte
Hallo
 Bitte helft mir bei einem Problem: Gegeben sind 1 linkes div und 1 rechtes div. Das rechte ist per float: right an dem linken ausgerichtet. Das linke div hat eine fixe Breite. Das rechte div wird automatisch an seinen Text-Inhalt angepasst. Nun mein Problem: * Wenn der Text im rechten div zu klein ist, also nur ein kleiner Satz, wird die Breite nicht auf die maximal verfügbare erweitert. * Wenn ich das rechte div auf eine Größe von 100% setze, ist es ja leider auf die Parent-Größe vom Browser definiert, also ist es dann rechts über den sichtbaren Bereich erweitert. Wie ist es möglich, dass ich links eine fixe Breite setze und rechts eine variable, mit maximaler Größe, so dass bei einer Auflösung von 800x600, 1024x768, 1680x1050 ... der rechte Inhalt immer die maximale Größe hat? Hier mal mein css und mein html: HTML-Code:
html, body{
margin:0;
padding:0;
text-align:center;
}
#pagewidth{
width:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#header{
position:relative;
height:225px;
background-color:#FF0000;
width:100%;
}
#leftcol{
/* width: 15%; */
width: 225px;
float:left;
position: absolute;
/* position:relative; */
background-color:#00FF00;
}
#maincol{
background-color: #0000FF;
float: right;
display:inline;
position: absolute;
/* position:relative; */
/* HiER ist der Teil, der mir Kopfweh macht, das soll den restlichen Bereich komplett blau füllen */
width:78%;
/* HiER ist der Teil, der mir Kopfweh macht, das soll den restlichen Bereich komplett blau füllen */
margin-left: 230px;
}
#footer{
height:125px;
background-color:#FFFFFF;
clear:both;
}
HTML-Code:
<body> <div id="pagewidth" > <div id="header" > Oben </div> <div id="wrapper" class="clearfix" > <div id="maincol" > Haupttext </div> <div id="leftcol" > Navigation </div> </div> <div id="footer" > Fusszeile </div> </div> </body> 
|
| Sponsored Links |
|
09.06.2010, 20:45
|
||||
|
||||
|
Zitat:
Zitat:
Zitat:
Zitat:
Daher die kompliziertere Lösung: Ein div um links und rechts. Dieses div bekommt padding-left entsprechend der linken Spalte. Diese floatet links und wird per neg. margin in den padding-Bereich geschoben (für die hierbei nötige E6-Extrawurst melde Dich nochmal). Die rechte Spalte floatet dann mit 100% Breite.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
| Sponsored Links |
|
09.06.2010, 21:00
|
|||
|
|||
|
Edit: ich habe den Fehler gefunden.
Ich darf natürlich nicht mehr absolute positionen verwenden. DANKE für Deine Hilfe Das hier hat sich erledigt... -> Danke für deine schnelle Antwort. So hat es auch nicht funktioniert, oder habe ich etwas übersehen? Ich nutze Firefox 3.63 (im ie noch nicht getestet). HTML-Code:
#leftmain{
padding-left: 225px;
}
#leftcol{
/* width: 15%; */
width: 225px;
float:left;
margin-left: -225px;
position: absolute;
/* position:relative; */
background-color:#00FF00;
}
#maincol{
background-color: #0000FF;
float: right;
display:inline;
position: absolute;
/* position:relative; */
/* HiER ist der Teil, der mir Kopfweh macht, das soll den restlichen Bereich komplett blau füllen
width:78%;
/* HiER ist der Teil, der mir Kopfweh macht, das soll den restlichen Bereich komplett blau füllen */
margin-left: 230px;
}
HTML-Code:
<body> <div id="pagewidth" > <div id="header" > Oben </div> <div id="wrapper" class="clearfix" > <div id="leftmain"> <div id="maincol" > Haupttext </div> <div id="leftcol" > Navigation </div> </div> </div> <div id="footer" > Fusszeile </div> </div> </body> Geändert von NoGAD (09.06.2010 um 21:07 Uhr) Grund: Habe den Fehler gefunden.
|
|
09.06.2010, 21:06
|
||||
|
||||
|
Du hast beide Lösungen zusammengewürfelt.
links und rechts pos. raus, und außerdem rechts display und margin raus, und width von 78% auf 100%. Schöner ist übrigens Navi im HTML vor Content (Google ist das übrigens egal).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
09.06.2010, 21:31
|
|||
|
|||
|
Hallo Heiko,
dank Deiner Hilfe habe ich es horizontal so hinbekommen, wie ich es wollte. Nun noch eine Frage, ist es möglich dieses Verhalten auch vertikal für den Hauptteil zu erreichen - wenn ja, kannst Du mir bitte noch eine Hilfestellung geben ? Viele Grüße ~Mathias
|
|
09.06.2010, 21:43
|
||||
|
||||
|
Was genau soll der Hauptteil tun? Evtl. suchst Du eine Kombination aus FAQ 1 und 7.
Übrigens muss Dein Footer noch clearen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
09.06.2010, 21:51
|
|||
|
|||
|
Huhu, hier hast Du mal einen Einblick, was ich eigentlich machen will.
(bitte schimpf nicht über das Aussehen, ich bin immer noch in der Findungsphase) Willkommen auf der Startseite Ich meine mit verticaler Höhe den Bereich, der übrig bleibt, wenn z.B. in der Bildergallerie links das Menü sichtbar ist, ist der Hauptinhalt kleiner von der Höhe her. Ich guck mir mal die Faq an
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 12:25 |
| css layout: rechte spalte ist sehr lang und soll selbe Höhe wie mittlere Spalte haben | gabine | CSS | 8 | 02.04.2009 19:40 |
| css templates mit variabler Höhe | heikovogl | CSS | 2 | 30.05.2007 10:40 |
| CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 25.08.2006 23:04 |
| CSS Layout mit fester und variabler Größe | Xavier | CSS | 7 | 18.01.2005 13:57 |
Linear-Darstellung
