Autor Zpráva
Member of Stackland
Profil *
Ahoj, mám na stránce tři divy. Rád bych je měl v "jednom" řádku, první zarovnaný doleva, druhý doprostřed, třetí doprava. Předpokládejme, že všechny tři budou mít pevnou šířku, např.:
divvpravo{width:150px;}
divuprostred{width:800px;}
divvpravo{width:150px;}
(pokud mi někdo poradí, jak na to i s proměnnou šířkou (auto), budu rád)

Nehledě na rozlišení uživatele by měly být vždy zarovnány stejně.
|divvpravo| divuprostred |divvlevo|

V CSS jsem nováček, na stránce mám zatím pouze toto:
/* CSS */
#body{height:auto;width:auto;border:1px dashed black;}
  #body_left{height:400px;width:100px;border:1px dashed red;float:left}  
  #body_middle{margin:auto;height:400px;width:1000px;border:1px dashed red;clear:right;}
  #body_right{height:400px;width:100px;border:1px dashed red;float:right;}

/* HTML */
  <div id="body"> 
    <div id="body_left"></div>   
    <div id="body_middle"></div>
    <div id="body_right"></div>   
  </div>

Když v HTML vykreslím nejdříve div right a potom middle, pak se to zobrazí tak, jak požaduji.
Ale řešení mi nepřijde správné, vy to tak řešíte?
Str4wberry
Profil
Vlastnost float můžete přidat i pro #body_middle.
Member of Stackland
Profil *
Potom se ale ztratí zarovnání divu divuprostred na prostředek, a zarovná se doprava, jak jsme mu přikázali.
To, že se jako neplovoucí div divuprostred zarovná na prostředek, mám zařízené jen u tohoto divu pomocí marging: auto (možná je to blbina a v praxi se to řeší jinak, poraďte)
Str4wberry
Profil
Já to řešívám jedním z těchto způsobů: Třísloupcový layout
jefitto44
Profil
Problém je v tom, že treba nastaviť relatívnu šírku divov...
Napríklad body_left necháš 150 px, body_right necháš 150 px a stred dáš width:100%;
Member of Stackland
Profil *
Děkuji za odpověď Str4wberry. Pokud to udělám tak, jak mi radíš:
#body_left{height:400px;width:100px;background-color:blue;float:left;}
#body_center{height:400px;width:100%;background-color:red;border:3px solid black;}
#body_right{height:400px;width:200px;background-color:green;float:right;}
pak se levý div body_left zarovná doleva, prostřední div body_center se roztáhne přes celou stránku od leva do prava a to doslova, tedy i přes (nebo spíše pod) div body_left, přitom levý div zůstane navrchu a prostřední je jakoby pod ním.
Pravý div div_right se zarovná doprava, ale je pod nimi, není v "jednom řádku".

To mé řešení, které jsem popsal nahoře, kdy jen prohodím pořadí v HTML kódu, jak budu divy vypisovat
(levý (zarovná se doleva), pravý (zarovná se doprava) a teprve naposled prostřední (vsadí se mezi ně) mi přijde špatně, ale funguje.

Zmíněný kód přesně koresponduje s tím, co mám na stránkách. Nevíte mi někdo poradit?
Member of Stackland
Profil *
Našel jsem na http://stackoverflow.com/questions/18428106/html-3-columns-header, tak se s vámi o něj chci podělit.
Díky za rady.

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: