Passi: Höhenanpassung bei floating Divs

Guten Tag,
versuche mich gerade daran eine neue Page zu konstruieren.
Folgendes probiere ich:

  • Seite komplett nur Divs
  • DIVs dynamische Höhe

------------------------DIV id=outher-----------------------
                   DIV id=head   /DIV
DIV id=side /|| DIV id=links /| DIV id=rechts /|| DIV id=seite /
                  DIV id=footer  /DIV
-----------------------/DIV (id=outher)----------------------

#outher
{
width:800px;
height:100%;     // problem  IE macht höher als 100% vll wegen den statischem footer und dem head ??
margin:auto;     //zentrierung
}

#side
{
width:10px;
height:100%;
overflow:none;
float:left;
border:0px ;
background-image:url(http://www.xxx);
background-repeat:repeat;
padding:0px;
}

#submenu
{
width:190px;
height:100%;
overflow:none;
float:left;
border: 0px;
background-image:url(http://www.xxx);
background-repeat:repeat;
padding:10px;
}

#content
{
overflow:none;
width:550px;
height:100%;
padding:10px;
float:left;

border: 0px;
background-image:url(http://www.xxx);
background-repeat:repeat;
}

#footer
{
padding-top:8px;
text-align:center;
height:22px;
width:800px;
overflow:none;
border:0px ;
clear:both;
background-image:url(http://www.xxx);
background-repeat: no-repeat;
}

#head
{
height:200px;
width:800px;
overflow:none;
float:none;
border: 0px ;
}

Also entweder ist der Div "links" oder der Div "rechts" der mit der größen height (inhaltsbedingt) . nur sollen seite, links, rechts diese höchste height auch annehmen. Da bisher jeder nur die Höhe seines Inhaltes hat. Ist das möglich und womit ?

// Habe schon geschaut , mit js kann man die höhe bestimmen aber dann ist es ein zeitliches problem die anderen anzupassen.

Das Kind ist auch zu besichtigen unter http://www.psychocity-band.de/index.php

  1. Hallo,#

    Grundsaetzlich ist das nicht moeglich. Du benoetigst ein paar Tricks um diesen (Pseudo)Effekt zu simulieren.

    Schau mal nach Faux Columns bei Google.

    Du kannst z.b. mit verschachtelten Divs arbeiten. Denk Dir was nettes aus.