nicht angemeldet
Problem mit 3 Spalten
Hallo ihr :-)
Ich komme bei einer eigentlich recht einfachen Sache nicht weiter:
Ich möchte in einem DIV 3 Spalten haben. Die rechte und die mittlere Spalte sollen eine vorgegebene Breite haben. Die linke soll den restlichen Platz komplett ausfüllen. Text, der in der linken Spalte steht soll beliebig lang sein können - ist er länger als der verfügbare Platz, soll er einfach abgeschnitten werden. Auf keinen Fall soll er umgebrochen werden, oder die Spalte einfach größer schieben, das verdirbt das Layout.
Mein Versuch:
<div style="width:300px; background-color:#FF0000;">
<div style="width:100%; background-color:#333333; float:left;">a</div>
<div style="width:20px; background-color:#666666; float:left;">b</div>
<div style="width:20px; background-color:#999999; float:left;">c</div>
</div>
Klappt aber nicht, Spalte a nimm die gesamte Breite ein und Spalte b und c werden in die nächste Zeile verdrängt. Wenn ich die Breitenangabe bei Spalte a weglasse, gehts auch nicht.
Kann jemand kurz weiterhelfen? Wäre SEHR nett! Danke :-)
Grüße
Chris
-
Hi,
Ich möchte in einem DIV 3 Spalten haben. Die rechte und die mittlere Spalte sollen eine vorgegebene Breite haben. Die linke soll den restlichen Platz komplett ausfüllen.
Dann musst Du die rechte und mittlere rechts floaten und mit einer width-Angabe versehen, die linke ungefloatet lassen (muss dann als letzte stehen) und ihr ein margin-right in der Gesamtweite der anderen Spalten geben.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Dann musst Du die rechte und mittlere rechts floaten und mit einer width-Angabe versehen, die linke ungefloatet lassen (muss dann als letzte stehen) und ihr ein margin-right in der Gesamtweite der anderen Spalten geben.
Besten Dank, hat perfekt funktioniert :D
Grüße
Chris -
Hellihello,
Ich möchte in einem DIV 3 Spalten haben. Die rechte und die mittlere Spalte sollen eine vorgegebene Breite haben. Die linke soll den restlichen Platz komplett ausfüllen.
Dann musst Du die rechte und mittlere rechts floaten und mit einer width-Angabe versehen, die linke ungefloatet lassen (muss dann als letzte stehen) und ihr ein margin-right in der Gesamtweite der anderen Spalten geben.so hatte ichs auch probiert:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>div_3_spalten.css</title> </head> <style type="text/css"> #surround { width:300px; border:3px solid yellow; background-color:#666666; } #a { width:100%; /*float:left;*/ border:3px solid red; background-color:#35a; } #b { width:20px; float:right; border:3px solid green; background-color:#5a3; } #c { width:20px; float:right; border:3px solid blue; background-color:#35a; } </style> <body> <div id="surround"style=""> <div id="c"> cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc cc cc cc cc cc cc cc cc cc cc cc cc cc cc cc ccc cc cc cc cc ccc </div> <div id="b"> bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bbb bb bb bb bb bbb bb bb bb bb bb bb bb bb bb bb bb bb bb </div> <div id="a"> aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaa </div> </div> </body> </html>Dank und Gruß,
frankx
-
-