css - DIV

Mám malý problé s css pozicováním. Když u menu zadám width=13% a u divu s textem dám left=13% tak mi text zasahuje do menu a když zmenším rozlišení tak tam zasahuje citelně. Když dám třeba left=14% tak je zase vidět bílé pozadí. Zatím to řeším tak že nastavím pozadí stejně jako pozadí textu, ale je to divný!

hodil bys sem ten problematický kód? Ráda bych se na to mrkla, ale takhle to nejpíš nevyluštím...

/*web*/
#menu{position:absolute;width:13%;height:122%;top: 18%; left: 0px}
#menu{background-color: black}
#text {position: absolute; width: 87%; top: 18.0%; left: 13%}
#text {background-image: url(pozadimenu.GIF)}
#hlavicka{position:absolute;width:102%;height:18%;top:0px;left: 0px}
#hlavicka {background-image: url(1.jpg)}

Zkouším s tím pižlit všemožným způsobem, ale chová se to divně. V Mozille to vypadá přesně tak, jak by si to člověk představoval, tedy divy na sebe navazují dokonale, nikde ani škvírka. IE a Opera to zobrazují tak, že text začíná asi 2px napravo od menu, vpravo samozřejmě končí o tutéž vzdálenost dál než hlavička a ke všemu je úplně vpravo asi dvacetipixelová díra.

Kód, na kterém to zkouším, vypadá následovně:

css:
#menu{position:absolute;width:13%;height:122%;top: 18%; left: 0px}
#menu{background:#555}
#text {position: absolute; top: 18%; left: 13%; width:87%}
#text {background:#bbb}
#hlavicka{position:absolute;width:100%;height:18%;top:0px;left: 0px}
#hlavicka {background:#999}


html:
<div id="menu">menu</div>
<div id="hlavicka">hlavička</div>
<div id="text">několik odstavců textu</div>

Nevím, proč v tomhle případě který prohlížeč dělá to, co dělá (v případě, že se posichruju a tagům html i body nastavím 100% šířku, nic se nemění). Nejjednodušší způsob by možná byla vlastnost float. Ještě se v tom trochu povrtám.

Hm. Ten původní kód jsem sice nedokázala rozkopat tak, abych věděla, čím to, nicméně jsem vyrobila stejně vypadající, ale na jiném principu fungující design. Žádné pozicování.

Má to hlavičku - normální div s nastavenou width a height. Pod tím jsou dva plovoucí divy:menu plave vlevo, text vlevo. A tam, kde končí vyšší z těch dvou floatů, si lebedí div jménem patička, který má nastavené clear:both a stará se o to, aby případné věci za plovoucími prvky nedělaly skopičiny. Tenhle poslední div jde mnoha způsoby zneviditelnit, ale na wz se dá elegantně využít třeba pro zobrazení reklamy dole na všech stránkách.

Šlo by udělat i takový plovoucí design, kde by mělo float nastavené jenom menu, které by bylo uvnitř divu s textem. V takovém případě by veškerý obsah tohle menu obtékal a tam, kde by skončilo, by si pro sebe text zabral celou šířku stránky. Ale ten první (a mnou v ukázce použitý) způsob je klasičtější.

Tady je kód.
The CSS:
<style type="text/css">
body {margin:0px}

#menu{width:13%;float:left}
#menu{background:#555;}

#text {width:87%; float:right}
#text {background:#bbb}

#hlavicka{width:100%;height:18%}
#hlavicka {background:#999}

#paticka{width:100%;height:18%; clear:both}
#paticka {background:#777}

</style>

The HTML:

<div id="hlavicka">hlavička</div>
<div id="menu">menu</div>
<div id="text">několik odstavců textu</div>
<div id="paticka">patička</div>

Je to DIVný možná proto se to tak jmenuje. Když nepoužiju procenta ale px tak to navazuje dobře, ale radši bych to přes ty procenta.

procenta jsou na prd, kazdej prohlizec si interpretuje po svym (jeden z cele obrazovky, jinej z nadrazenyho elementu..)

Já vim je to s nima takový pochyvný!