Poul Erik Jensen skrev:
> "Poul Erik Jensen" <jep@image.dk> skrev i en meddelelse
> news:44e5eb71$0$3516$edfadb0f@dread11.news.tele.dk...
>
>> Alligevel er det ikke så nemt i praksis, ....
>
> ... men det hjælper naturligvis at stave rigtigt
>
> Løsningen blev:
>
> div#spalter { /* container */
> display:block;
> position:static;
> margin:0 1em;
> border:1px solid blue;
> background-color:white;
> }
>
> div#vspalte { /* første */
> display:block;
> position:static;
> float:left;
> width:48%;
> padding-right:1%;
> }
>
> div#hspalte { /* anden (med xx% deling også 3., 4., ...) */
> display:block;
> position:static;
> float:left;
> width:48%;
> padding-left:1%;
> border-left:3px solid blue;
> }
>
> Det er ikke sikkert det er rigtigt, men det giver i det mindste det ønskede
> resultat
)
>
Ja, mærkeligt nok.
1.
Jeg tror, du laver en alvorlig logisk fejl
i formdeklarationerne for venstre og højre
spalte.
position:static bestemmer, at elementet
skal bevare den "originale" placering,
det vil sige, elementet skal vises som
om det ikke havde nogen position-egenskab.
Du kan fortolke det som om position:static
er det samme som position:none, en egenskab
der ikke findes.
Et element med denne egenskab indgår i
det normale omløb af elementer i forhold til
elementets placering i kildekoden.
Men samtidig float'er du elementet, og tager
det dermed ud af det normale element-omløb,
en variant så at sige over position:absolute.
Du har altså to modstridende formregler.
Det, der så tilsyneladende sker her er,
at kaskaden træder i kraft og den sidste
formregel bestemmer.
Men fjern position:static - den hører ikke
hjemme i et float'et element.
2.
display:block er også overflødig. Skal
du endelig have en display-egenskab på
et float'et element, bør det være
display:inline; som er et stylesheet
hack der fjerne IE's dobbelt margin bug.
(Se
http://www.webdesign101.dk/showcase/float/index.html)
3.
Jeg har kigget p din testside, og har lidt
ved at se, hvad problemet er. Du skriver
"Det er specielt margin/padding der driller, og som
tilsyneladende knytter sig til rammen fremfor teksten, som
den skal danne afstand fra."
Tilsyneladende? Ethvert element får jo
den border,padding og margin du giver det.
Husk altid på, at en margin på et element
skaber afstand til andre elementer, mens
en padding på et element skaber afstand
til elementets indhold.
4.
Du risikerer alvorlige vanskeligheder, hvis
du fortsætter med at lægge procenter og
absolutte mål sammen:
Din venstre spalte har en bredde på
48% og en padding-right på 1% (af 48%),
den højre spalte en bredde på 48% og
en padding-left på 1% (af 48%).
Det giver en samlet bredde på ca. 99 %
af det overordnede element. Men så
lægge du en border-left ind på højre
spalte på 3 pixel. Hvor mange procent
er det?
5.
I stedet for at formatere så meget
på de float'ede elementer er det altid
en god idé at formatere /indholdet/
af css-kasser - i det aktuelle tilfælde,
i stedet for at sætte padding på kasserne,
sæt da margin på indholdet.
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..