Wysokość dla div'a, jak ją ustawić? Opcje

[mike]

Mam taką sytuację:

3 elementy div o następującym wyglądzie:

Kod

+------------------------------------------------+
|+-------------++-------------------------------+|
||             ||                               ||
||             ||                               ||
||             ||                               ||
||             ||                               ||
||      B      ||                               ||
||             ||                               ||
||             ||                C              ||
||             ||                               ||
|+-------------+|                               ||
|               |                               ||
|               |                               ||
|               |                               ||
|     A         |                               ||
|               +-------------------------------+|
|                                                |
|                                                |
|                                                |
+------------------------------------------------+

I teraz pytanie:

Jak zrobić aby element B lub chociażby C miał maxymalną wysokość na jaką pozwala A?
Element A równie dobrze może być elementem BODY.

Mówimy o XHTML'u i style="height: 100%" nie wchodzi w gre bo nie działa.

Ten post edytował mike_mech 21.07.2005, 16:46:05

[Diablos]

Mam podobny problem, lecz u mnie cały problem tkwi w tym ze na jdnej przegladarce jest ok, na drugiej w miare ok, a na trzeciej nie do przyjecia (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

mianowicie:

http://e37.e2u.cc/daln/


kod:

Kod

<style>
body
{
font-family: verdana, arial, serif;
margin: 0;
padding: 0;
text-align: center;
color: gray;
font-size: 10px;
text-align: left;
}

</style>
<div style="width: 100%; height: 134px; background: url(images/tlo.jpg) repeat-x; text-align: center;">
<div style=" width: 717px; height: 134px; margin: 0 auto 0 auto; background: url(images/logo.jpg) top center no-repeat;">
</div>
<div style="display: block; width: 100%; border: solid 0px; background: #f1f1f1; text-align: center;">
<div style="display: block; width: 715px; border: solid 0px; margin: 0 auto 0 auto;">

    <div style="display: block; width: 100%; height: 500px; border: solid 0px; text-align: left; background: #e6e7eb;">
      <div style="display: block; width: 183px; height: 100%; background: #dadde2; float: left; padding-top: 10px;">

       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px; width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;">asd</div>
      
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>

        <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>


        <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>
       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>


        <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: -1px; width: 160px; height: auto; background: #9a9a9b; float: left; border: 1px solid #7e7e7e;">sadasd</div>

       <div style="display: block; margin-top: 0px; margin-left: 10px; margin-bottom: 3px;  width: 160px; height: 100px; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;"></div>

      </div>
<div style=" margin-top: 10px; margin-left: 3px; width: 320px; background: #f6f7f9; border: 1px solid #cacacc; float: left;">sadsadsad</div>
      <div style="display: block; width: 183px; height: 100%; background: #dadde2; float: right;">
       <div style="display: block; margin: 7pt; width: 160px; height: auto; background: #bfc0c1; float: left; border: 1px solid #7e7e7e;">sa</div>
      </div>
    </div>
    <div style="display: block; width: 100%; height: auto; border: solid 0px; background: #dadde2 top center no-repeat;">Stopka Szczurebska</div>

</div>
<div>

Pod IE:
- teoretycznie wszystko ok, jedyne co psuje wyglad to to, ze szerokosci MENU sa jakos wieksze niz na reszcie przegladarek, tak jakby IE inaczej interpretował szerokosc w px

Pod Opera:
- prawe menu nie dojezdza do konca (nie wiem jak naprawic)

Pod FF:
- najgorzej wyglada, bloki menu po lewej stronie wyjezdzaja poza div, w którym sie znajduja, a przeciez div w ktorym sie znajduja powinien sie automatycznie wydłuzac.

Prosze o pomoc z gory dziekuje.