Container nebeneinander über die ganze Seite,und ineinander

[X-Tractor]

Hi erstmal,
dies ist mein erster Beitrag und ich habe gleich ein (für mich) schwieriges Problem.
Um dieses Problem besser verdeutlichen zu können, habe ich eine kurze Skizze dazu gemacht:



Ich möchte auf einer Seite die linke Seite komplett von oben nach unten
mit einer Farbe haben; außerdem am rechten Rand einen Border.
Die rechte Seite soll in einer anderen Farbe sein. In diesem Container soll jetzt wieder ein anderer Container rein, der Text2 (auf dem Bild).

Dies habe ich versucht über CSS zu lösen, allerdings komme ich nicht ganz
weiter. Weil entweder ich benutze %-Angaben, was aber dazu führt, dass die
einzelnen Container nicht genau aneinander liegen oder ich mische %- und px-Angaben, was aber dazu führt, dass die Seite falsch angezeigt wird, wenn die Auflösung eine andere ist.

Das habe ich in der CSS Datei:

html, body   {
   margin:0;
   height:100%;
   background-color:#0012FF;
   
   }

.links    {
      background-color:#000000;
      height:100%;
      width:30%;
          float:left;
      border-right:2px #fff solid;
      padding:0;
      }

.rechts   {
      background-color:#0012FF;
      height:100%;
      width:70%;
      float:right;
      margin-top:0px;   
      padding:0;
      }

.text2 {
               background-color:#CCCEED;
               height:100px;
               width:100%;
               border-top:2px #fff solid;
               border-bottom:2px #fff solid;
               margin-height:100px;
         } 

In die HTML Datei habe ich folgendes geschrieben:

<div class="links">
Text 1 hierin.
</div>

<div class="rechts">
<div class="text2">
Text2 bla bla bla
</div>

Und hier alles andere an Text hin...
</div> 

Aber so funktioniert das nicht so, wie ich es mir vorstelle. Es sollte dann ja auch noch so sein, dass wenn jemand eine andere Auflösung hat, es dennoch noch irgendwie passt, nur kleiner wird.

Ich hoffe ihr könnt mir irgendwie helfen...

Vielen Dank schonmal!

[YesAmerika]

Hi,
vielleicht ware ne Table dafür geeignet? Und alle width-Angaben in % angeben. Leider kann man auf dem mickrigen Bild nix erkennen.

[X-Tractor]

Mit Tabellen wäre es möglich, aber der Witz ist ja, dass man sowas ja auch mit CSS machen kann und sollte.

Das Bild reicht doch. Es geht ja nur um das grobe Aussehen, wie es letztlich werden soll.

[YesAmerika]

Da ich ja von CSS und Styles nur wenig Ahnung habe, habe ich eben mal etwas geprobt. Wenn Du die Höhe der linken Seite ohne % angibst, wird sie auch angezeigt. Kann es daran liegen, das die höhe nicht in % angezeigt werden kann?

Ich lerne gerne dazu.

Yessi

ps: Da ich gerade Langeweile hatte, habe ich mal Mr. Google beauftragt nach CSS und Tabellen zu suchen. Folgender Link könnte für Dich interessant sein.
Link

Yessi

[Kropff]

1. es gibt kein margin-height
2. schmeiss bei .rechts das float raus

dann sieht es schon ein wenig anders aus, zumindets im ff.

gruß
peter