Stránka 1 z 1

CSS - zarovnani divu

Napsal: 04 úno 2011 01:56
od simPod
zdravim, mam 2 divy v containeru, potrebuju je zarovnat tak, jak jsou na obrazku, pokud mozno bez absolutni pozice. poradil by mi prosim nekdo jak na to? dekuji

Sans titre.png
Sans titre.png (5.58 KiB) Zobrazeno 1099 x

Re: CSS - zarovnani divu  Vyřešeno

Napsal: 04 úno 2011 09:50
od Myloš
Nic složitého:

Kód: Vybrat vše

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body, div, p {margin: 0; padding: 0;}
p {text-indent: 2em;}
body {background-color: black;}
#container {width: 960px; background-color: #ffe; margin: auto; padding: 20px;}
#div1 {width: 500px; background-color: #990; margin: auto;}
#div2 {width: 200px; background-color: #099; float: right;}
hr {clear: right; visibility: hidden;} /*čistič - kvůli floatu */
</style>
<title>Příklad se zarovnýním divů</title>

<div id="container">
  <div id="div2">
    <p>Božnám vla podtrojdi oba autobzor dobrajen já drávadlov říky Buben jít. Oba dostě božkamezi dosticí je Buben podtrojdi hudba zako dráček ští.
     <p>Ana úmyva umraburdí nim sudbale tak lákamat vůně úmyvalem Trhnova magnednem. Muto pokemi aložek lák ští boutný onověď hal ří dostrojsk Umyslupos. Dobožek.
     <p>Nim poc parcipádn zteplaled jený Umínkama škočiledo z kajední sudba sou. Úmyvat no krádní Básněžný ko hudbalo úmyvalemi vá čuvalemi škočiledo božkamezi. Ačít.
     <p>Ačkový Tor lžičkaký Je krádní povodlobi odobzor uměsí umrad básná mutor. Starásný hulákak nuchváled málně nasíční z roští projedpok září aložek řící. Magneumín říky tobselad drávačkol říky umělý hraparcip.
  </div>
  <div id="div1">
      <p>Lákamí vůněhulás úmyval rohlivý jednovod lek k hafanechř lák boliv úmysl. Rostrojsk roští dostrojsk taneumra Partavěď srdí a mocipádec škočiledo autor úmyslunce. Tak bývá štím mocipáda sólo.
      <p>Hliv Tor zteplasti obzor ří hudíčkový magneumín kráčepres vůněhulás Depicí úmyvat. Měsí Přesiv rojednova roští já nim jít božnám drávadlov umyslupou umělý. Umraprošt čníky lva bájedpodl úmyval Umraburdí drátobick drásníky nesta jednovátc v. Bolivní.
      <p>K Partavěď hole větrhnova Lžičkočár vůněhulás hanalemi umrapříke čajenný umraje bolo. Tlínkat dopicí lák přední zenžto jít obit záprajen hou neda sudí. Zvesmezil anadobra vůněhulás úmyslušle ječní hafanadop rojdi z čajenný nesta A. Napný mocipáda buby alem umítky.
      <p>Sestí umrajedpo ta lekajakko říkem štím Al dosticí škočiledo tobselad lákaje. Ně rozem Holiv jít Tor postě štím z pánová říc Dobzor. Aložek povodlobi zlek ne Lžičkočár rojskočár sestí jakočil.
  </div>
<hr>
</div>


Pokud bys měl nějakou nejasnost, klidně se ptej.
Ty odstavce s textem jsem tam dal proto, aby to vypadalo jako stránka s textem. Pokud by tam totiž nebyl žádný text, musel bys nastavovat výšku divů (implicitně mají nulovou).
DIVy jsem obarvil, aby bylo poznat, který je který.
Kontejneru jsem nastavil šířku 100px jako 960px + padding 2× 20px = 100px celkem, ale to platí ve standardním vykreslovacím režimu (viz !DOCTYPE). V Quirku by to bylo celkem jen 960px.
Konečně ve zdejším boxu s CODE je to nepřehledné, ale zkopíruj si to třeba do PSPadu a všechno je v kódu přehledně zarovnané.

Re: CSS - zarovnani divu

Napsal: 04 úno 2011 14:39
od simPod
aha. ja to delal presne tim sammy css, akorat jsem mel v html prohozen div1 a div2
diky moc

Re: CSS - zarovnani divu

Napsal: 04 úno 2011 14:53
od Myloš
Ono by to klidně šlo udělat i s tím pořadím divů, jak jsi ho měl původně. Protože znáš dopředu šířku všech divů, lze to udělat tak, že první nebude vycentrovaný automatickým okrajem (margin: auto), nýbrž bude obtékaný zprava (float: left) a bude mít nastavený levý margin na 230px (sám zabírá polovinu, tedy 500px, proto zbývá čtvrtina vlevo a čtvrtina vpravo. Čtvrtina z 1000px je 250px minus levý padding hlavního divu 20px = 230px.
Proto stačí poopravit následující řádky:

Kód: Vybrat vše

#div1 {width: 500px; background-color: #990; margin-left: 230px; float: left;}
#div2 {width: 200px; background-color: #099; float: right;}

Re: CSS - zarovnani divu

Napsal: 04 úno 2011 14:55
od simPod
aha. chapu. diky moc

Re: CSS - zarovnani divu

Napsal: 04 úno 2011 14:56
od Myloš
Ještě bych doplnil – na CSS je fascinující to, že čím složitější konstrukce, tím víc má možných řešení a člověk nakonec zjišťuje, že z dvanácti možných řešení je nejlepší až to patnácté. :wink: