nafetS: DIV-Container auto-breite bzw auto-höhe, aber wie?

Beitrag lesen

Hallo alle zusammen,

mittlerweile hab ich meine HP auf DIV-Container umgestellt. Das ausrichten, Anzeigen etc. macht mir keine Probleme.Wie es Grafisch aussehen soll und den gekürzten Quelltext dazu habe ich weiter unten stehen.

Probs bzw. weiter kommte ich nicht mit den Boxen 4 und 8. Box 4 enthält eine Grafik die entsprechend der BrowserHÖHE nach unten gekachelt werden soll. Box8 macht mir den gleichen Ärger. Nur soll hier im Browserfenster eine Grafik nach rechts gekachelt werden.

Wie man sieht hab ich es u.a. mit einem AUTO-Wert versucht, aber keinen Erfolg erzielt.

Kann mir jemand weiterhelfen???

<div>     <div>                    <div>
|-------| |----------------------| |-----------|
| Box1  | |    box5              | | box8      |
|-------| |----------------------| |-----------|
</div>    </div>                   </div>

<div>     <div>
|-------| |----------------------|
| Box2  | |    box6              |
|-------| |----------------------|
</div>    </div>

<div>     <div>
|-------| |----------------------|
| Box3  | |                      |
|       | | box7                 |
|-------| |                      |
</div>    |                      |
          |                      |
<div>     |                      |
|-------| |                      |
| box4  | |                      |
|-------| |----------------------|
</div|    </div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>&nbsp;</title>
<style type="text/css">
#box1 { position:absolute; top:0px; left:0px; width:199px; height:73px;}
#box2 { position:absolute; top:73px; left:0px; width:199px; height:12px;}
#box3 { position:absolute; top:85px; left:0px; width:199px; height:309px;}
#box4 { position:absolute; top:394px; left:0px; width:199px; height:auto;}
#box5 { position:absolute; top:0px; left:199px; width:400px; height:73px;}
#box6 { position:absolute; top:73px; left:199px; width:400px; height:12px;}
#box7 { position:absolute; top:85px; left:199px; width:400px; height:500px;}
#box8 { position:absolute; top:0px; left:599px; width:auto; height:73px;}
</style>
<style type="text/css">
.div4 {
 background-image: url(../templates/test/images/3.gif);
 background-repeat:repeat-y;
 background-position: 0 0;
}

.div8 {
 background-image: url(../templates/test/images/4.gif);
 background-repeat:repeat-x;
 background-position: 0 0;
}
</style>
</head>

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<div id="box1" class="div1"><img src="../templates/test/images/logo.gif" alt="Fachverband für Systemische Beratung" height="50" width="199"></div>
<div id="box2" class="div2">&nbsp;</div>
<div id="box3" class="div3"><?php mosLoadModules ( 'left' ); ?></div>
<div id="box4" class="div4">&nbsp;</div>
<div id="box5" class="div5"><img src="../templates/test/images/schriftzug.gif" width="399" height="40" /></div>
<div id="box6"><span class="pathway"><?php include "pathway.php"; ?></span></div>
<div id="box7"><span class="pathway"><br><?php include ("mainbody.php"); ?></span> <span class="pathway"> </span> </div>
</body>
</html>