Forum Doku Wiki Blog

Forumsarchiv 2007, November
Problem mit 3 Spalten

archivierte Beiträge lesen

  1. (CSS) Problem mit 3 Spalten von Chris, 08. 11. 2007, 13:22

Problem mit 3 Spalten

Der folgende Beitrag wurde am 08. 11. 2007, 13:22 Uhr von Chris veröffentlicht.

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

Problem mit 3 Spalten

Der folgende Beitrag wurde am 08. 11. 2007, 13:47 Uhr von Joachim veröffentlicht.

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.

Problem mit 3 Spalten

Der folgende Beitrag wurde am 08. 11. 2007, 14:11 Uhr von Chris veröffentlicht.

> 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

Problem mit 3 Spalten

Der folgende Beitrag wurde am 08. 11. 2007, 14:18 Uhr von frankx veröffentlicht.

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

Problem mit 3 Spalten

Der folgende Beitrag wurde am 08. 11. 2007, 14:03 Uhr von Inita_ veröffentlicht.

hoi,

schau mein Beispiel an:

http://inix.blogiem.lv/2007/07/25/8990.html

Gruss,
Inita

© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4