CSS Boxen

[MastaKev]

Hallo,

und zwar ich habe para problemas.

Folgendes Bild möchte ich erreichen:
http://img192.imageshack.us/img192/3800/sirse.jpg

Und nun habe ich folgendes Problem, das id=main (Schwarzer Rand, ohne Innenabstand denken! (Ergo, nicht wie auf dem Bild)) ist nur ein Fingerhut groß, sämtliche anderen Boxen schießen über das id=main hinaus. Das soll aber nicht so sein. Da id=main die Hauptbox ist, soll sie mit der länge der anderen Boxen mitwachsen, damit von der id=main die Statusleiste id=statusleiste (rot) mit verschoben wird bzw. das elemet position=relative auch richtig funktioniert. So hängt es eben mitten im Bildschirm über den anderen Boxen, oder wer FF nutzt darunter.

Dann habe ich das Formfeld id=suche (pink), wenn diese box wächst, soll die Box darunter id=news (blau) darunter bleiben. Zur Zeit ist es so, dass die id=suche einfach unter der id=news hindurch geht. Ich habe news nicht geschafft so zu machen, dass es mitgeht, sondern eine feste Position hat. id=inhalt ist die orangene Box.

Hier der HTML Code:

  
 <div id='main'>  
  
   <div id='suche'>  
    text 2  
   </div>  
  
   <div id='news'>  
    kein text  
   </div>  
  
   <div id='inhalt'>  
    mehr text  
   </div>  
  
 </div>  
  
 <div id='statusleiste'>  
  text  
 </div>  

CSS-Code:

  
@charset "ISO-8859-1";  
html, body {  
 background-attachment: scroll;  
 background-color: #E0E0E0;  
 background-image:url(./hintergrund.png);  
 background-repeat: repeat;  
 height: 100%;  
 margin: 0cm;  
 min-width: 20cm;  
 padding: 0cm;  
 width: 100%;  
}  
body {  
 font-family: Verdana, Helvetica, Geneva, Arial, 'Times New Roman';  
 color: #000000;  
 font-weight: bold;  
 font-size: 10pt;  
}  
#main {  
 position: relative;  
 top: 1cm;  
 left: 5%;  
 width: 90%;  
 text-align: center;  
 vertical-align: middle;  
 padding: 0cm;  
 z-index: 1000;  
}  
#suche {  
 background-color: #FFFF00;  
 left: 0cm;  
 position: absolute;  
 height: 7cm;  
 width: 23%;  
 z-index: 1001;  
}  
#news {  
 background-color: #FF90FF;  
 left: 0cm;  
 top: 5cm;  
 position: absolute;  
 width: 23%;  
 z-index: 1001;  
}  
#inhalt {  
 background-color: #FF8800;  
 left: 23%;  
 position: absolute;  
 width: 77%;  
 z-index: 1001;  
}  
#statusleiste {  
 top: 4cm;  
 text-align: center;  
 background-color: #fed;  
 border: 2px solid #000;  
 left: 5%;  
 width: 90%;  
 position: relative;  
 z-index: 1000;  
}  
  

Falls ihr euch wegen z-index wundert, da ist noch mehr, aber das ist schon korrekt. Daher hat die id=main die einstellung relative, weil vorher noch boxen da sind die beim scrollen stehen bleiben und nicht überdeckt werden.

Ich Danke im Vorraus,
Gz,
MastaKev