Problem mit 3 Spalten von frankx, 08.11.2007 14:18

Problem mit 3 Spalten

frankx 08.11.2007 14:18

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

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

frankx: Problem mit 3 Spalten

Beitrag lesen

Problem mit 3 Spalten

Problem mit 3 Spalten