Autor Zpráva
llamqa
Profil
Zdravím,

mám následující problém: chci na stránce mít objekt, který bude horizontálně rozdělen na dva divy, a následně pravý rozdělen na další dva. Problém je v tom, že první rozdělení je na základě procent, neboť nevím předem šířku objektu, ta závisí na rozlišení monitoru, a druhé dělení ja na základě pixelů, neboť znám pevnou velikost objektu napravo, ale neznám šířku zbylé části. Naivně jsem se domníval, že toto pořeší width: *, ovšem skutečnost je taková, že neřeší. Pokud si spočtu zbývající pixely a nastavim pevnou šířku divu, tak zarovnání funguje, viz příklad:

Návrh toho, jak by to mělo vypadat: navrh
Realita, pokud dám width: * realita

#paticka {text-align: justify;
          margin: 15px;
          font-family: 8px 'Verdana', serif}

#paticka_prava {float: right;
                background: yellow;
                width: 40%}
 
#paticka_leva {float: left;
               background: green;
               width: 60%}

#paticka_leva2 {float: right;
                background: red;
                width: 200px}

#paticka_leva3 {background: orange;
                float: left; 
                width: *}

#zarovnani {clear: both;
            margin: 0;
            padding: 0}
           

<?php
   echo "<div id='paticka'>";

    echo "<div id='paticka_leva'>";
     echo "test 1";
    echo "</div>";  

    echo "<div id='paticka_prava'>";
     echo "<div id='paticka_leva2'>";
      echo "test 2";
     echo "</div>"; 
     echo "<div id='paticka_leva3'>";
      echo "test 3 ... zkouska zarovnani divu, jestli to bude fungovat ...";
     echo "</div>";  
 
    echo "</div>";  

    echo "<div id='zarovnani'>";
    echo "</div>"; 

   echo "</div>";

 ?>

Nenašel by se někdo znalý, kdo by poradil, co s tím ? Pevná šířka objektu se mě nejeví jako řešení ...
Trejpa
Profil
llamqa:
<style>
#sedesat { float: left; width: 59.5%; }
#ctyricet { float: left; width: 40%; }
#zbytek { margin-right: 200px; }
#dveste { float: right; width: 200px; }
.cistic { clear: both; }
</style>

<div id=sedesat>
    60 %
</div>

<div id=ctyricet>
    40 %
  <br class=cistic>
  <div id=dveste>
    200 px
  </div>
  <div id=zbytek>
    zbytek
  </div>
</div>
llamqa
Profil
Díky, to vypadá přijatelně ... S display: hidden u clearu to zřejmě vyřeší můj problém.
margin
Profil *
llamqa:
S display: hidden u clearu to zřejmě vyřeší můj problém.
display: hidden je neexistující kombinace, s display: none; ti to nebude fungovat a pokud použiješ visibility: hidden; bude to vypadat úplně stejně, jako bez této deklarace.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: