[CSS] 2x width 50% = 100.1%

[josjos]

Tweakers,
Probleem: als ik width 50% meegeef geeft IE7 de right border onder de linker weer. (het is dus meer als 100%). Als ik 49% en 51% meegeef is het probleem opgelost maar sluit hij niet goed meer aan.
Wie helpt me een stap verder?

Cascading Stylesheet:

body,html
{
    margin:0px;
    padding:0px;
}
.bg-left {
    background: url(bg_left.jpg) no-repeat right top; 
    float: left; 
    width: 50%; 
    height: 1250px;
}
.bg-right {
    background: url(bg_right.jpg) no-repeat left top; 
    float: right; 
    width:50%; 
    height: 1250px;
}
.block-bg {
    width: 100%; 
    position: absolute;
    padding:0px; 
    margin:0px;
}

HTML:

<DIV class=block-bg>
<DIV class=bg-left>&nbsp;</DIV>
<DIV class=bg-right>&nbsp;</DIV>
</DIV>

[macciez]

Even voor de duidelijkheid, het gebeurt alleen bij IE7? Kan zelf namelijk even niks testen hier en ken het probleem zo niet.
Denk zelf dat IE7 de borders buiten die 50% laat vallen en de andere browsers niet, maar dat is slechts een vermoeden gebasseerd op niks. Mocht dat het geval zijn, zou je even een IE7-only css moeten maken (of een hack, wat natuurlijk niet aan te raden is).

[josjos]

macciez schreef op vrijdag 18 september 2009 @ 13:21:
Even voor de duidelijkheid, het gebeurt alleen bij IE7? Kan zelf namelijk even niks testen hier en ken het probleem zo niet.
Denk zelf dat IE7 de borders buiten die 50% laat vallen en de andere browsers niet, maar dat is slechts een vermoeden gebasseerd op niks. Mocht dat het geval zijn, zou je even een IE7-only css moeten maken (of een hack, wat natuurlijk niet aan te raden is).

IE6 ook, IE8 werkt prima, Het lijkt of Safari de 50 zelf 49.9% maakt.

[Turiya]

Volgens het box model valt de border buiten je div's.

Voor een plaatje waarin de 'width' property duidelijker terugkomt:
CSS spacing

IE7 doet het dus precies zoalt het moet.

[ Voor 7% gewijzigd door Turiya op 18-09-2009 13:29 ]

[PowerSp00n]

Turiya schreef op vrijdag 18 september 2009 @ 13:28:
Volgens het box model valt de border buiten je div's.

Als ik de CSS van de TS zo zie vermoed ik eigenlijk dat hij het over de 'visuele' borders gaat die hij maakt door middel van een background links/rechts in de div-jes?

[R4gnax]

josjos schreef op vrijdag 18 september 2009 @ 13:05:
Tweakers,
Probleem: als ik width 50% meegeef geeft IE7 de right border onder de linker weer. (het is dus meer als 100%). Als ik 49% en 51% meegeef is het probleem opgelost maar sluit hij niet goed meer aan.
Wie helpt me een stap verder?

Bekend probleem. Die 50% moet afgerond worden naar hele pixels. Als 100% een oneven aantal, zeg 305px, is, dan houdt 50% een decimale fractie over: 152.5px. Hoe browsers hier mee om moeten gaan is niet erg goed vastgelegd.

Dit kan leiden tot scenarios waar beide blokken naar boven afgerond worden, dus: 153px + 153px = 306px > 305px. Dan past alles dus horizontaal niet netjes en wordt één v/d floats naar beneden geduwd.

Het kan ook leiden tot een ander scenario, waar beide blokken naar beneden afgerond worden, dus: 152px + 152px = 304px < 305px. Dan krijg je een gaatje van 1px breed tussen beide floats.

Het wordt natuurlijk pas echt leuk wanneer je 3 of meer blokken op deze manier op één lijn probeert te krijgen...


Probeer voor de gein maar eens of je het containing blok van grootte kunt wijzigen door je browser venster te resizen, en zie hoe je floats continu verspringen als je weer op een even/oneven aantal pixels belandt...

[_Thanatos_]

In plaats van het afrondingsprobleem uit de doeken te doen, kun je het probleem ook anders oplossen. Nml door slechts één kolom te maken die eigenlijk de rechter kolom is. Die geeft je 50% breedte, position:absolute, en tot slot een right:0;

Vervolgens de linker kolom, dat is stiekem gewoon de container (block-bg gok ik). Die geef je een padding van 50% aan z'n rechterkant. Dan lijkt het net alsof je twee kolommen hebt.

[R4gnax]

_Thanatos_ schreef op zaterdag 19 september 2009 @ 03:20:
In plaats van het afrondingsprobleem uit de doeken te doen, kun je het probleem ook anders oplossen. Nml door slechts één kolom te maken die eigenlijk de rechter kolom is. Die geeft je 50% breedte, position:absolute, en tot slot een right:0;

Vervolgens de linker kolom, dat is stiekem gewoon de container (block-bg gok ik). Die geef je een padding van 50% aan z'n rechterkant. Dan lijkt het net alsof je twee kolommen hebt.

Geef een man een vis, leer een man vissen, etc. Fijn dat je een kant en klaar oplossing uitspuugt hoor, maar mijns inziens daar heb je maar zoveel aan...

[_Thanatos_]

Dit is meer voordoen hoe je een vis vangt... Ik geloof niet dat ik zijn probleem kant en klaar opgelost heb zonder hem te laten zien hoe ik het gedaan heb.

[ Voor 55% gewijzigd door _Thanatos_ op 21-09-2009 05:13 ]

[Grijze Vos]

En de volgende keer als hij weer tegen een soortgelijk probleem aanloopt weet hij nog steeds niet waarom het niet werkt zoals hij verwacht. Handig.

[frumper]

R4gnax schreef op vrijdag 18 september 2009 @ 14:05:
[...]


Bekend probleem. Die 50% moet afgerond worden naar hele pixels. Als 100% een oneven aantal, zeg 305px, is, dan houdt 50% een decimale fractie over: 152.5px. Hoe browsers hier mee om moeten gaan is niet erg goed vastgelegd.

Dit kan leiden tot scenarios waar beide blokken naar boven afgerond worden, dus: 153px + 153px = 306px > 305px. Dan past alles dus horizontaal niet netjes en wordt één v/d floats naar beneden geduwd.

Het kan ook leiden tot een ander scenario, waar beide blokken naar beneden afgerond worden, dus: 152px + 152px = 304px < 305px. Dan krijg je een gaatje van 1px breed tussen beide floats.

Het wordt natuurlijk pas echt leuk wanneer je 3 of meer blokken op deze manier op één lijn probeert te krijgen...


Probeer voor de gein maar eens of je het containing blok van grootte kunt wijzigen door je browser venster te resizen, en zie hoe je floats continu verspringen als je weer op een even/oneven aantal pixels belandt...

Nooit over nagedacht eerlijk gezegd... maar als je al weet dat je blok 305px is, wat is dan het voordeel van links en rechts een % te geven ipv vaste waardes? Want met de vaste waardes voorkom je sowieso dat je rechterblok naar beneden valt.

[R4gnax]

frumper schreef op maandag 21 september 2009 @ 09:53:
[...]


Nooit over nagedacht eerlijk gezegd... maar als je al weet dat je blok 305px is, wat is dan het voordeel van links en rechts een % te geven ipv vaste waardes? Want met de vaste waardes voorkom je sowieso dat je rechterblok naar beneden valt.

305px was slechts een voorbeeld om de redenatie makkelijk te volgen. Hetzelfde verhaal gaat op als je een complete html body (100% breedte van de viewport, dus) hebt waarin je twee of meer kolommen met procentuele breedte neer zet, waarbij de breedtes opgeteld precies op 100% uitkomen.

Moet je dan eens je browser venster gaan resizen en kijken wat (o.a.) IE er van maakt. Ai, ai, ai.

[Da Weef]

_Thanatos_ schreef op zaterdag 19 september 2009 @ 03:20:
In plaats van het afrondingsprobleem uit de doeken te doen, kun je het probleem ook anders oplossen. Nml door slechts één kolom te maken die eigenlijk de rechter kolom is. Die geeft je 50% breedte, position:absolute, en tot slot een right:0;

Vervolgens de linker kolom, dat is stiekem gewoon de container (block-bg gok ik). Die geef je een padding van 50% aan z'n rechterkant. Dan lijkt het net alsof je twee kolommen hebt.

Ik vind dit niet eens een hele mooie oplossing. De indeling zoals TS die gebruikt kan ook prima werken i.c.m. faux columns. Met het voordeel dat de container niet schermvullend hoeft te zijn.

[Verwijderd]

Het combineren van float:left met float:right wil in IE7 nog wel eens voor onverwachte resultaten zorgen. Probeer het eens met float:left op beide inner div's te plaatsen? Dat zou in essentie hetzelfde moeten zijn.

[_Thanatos_]

Da Weef schreef op maandag 21 september 2009 @ 11:33:
[...]


Ik vind dit niet eens een hele mooie oplossing. De indeling zoals TS die gebruikt kan ook prima werken i.c.m. faux columns. Met het voordeel dat de container niet schermvullend hoeft te zijn.

Wat ik voorstel is faux columns, alleen heb ik het nooit zo genoemd. Enige dat je nog moet doen is een achtergrondplaatje erin zetten dat net doet alsof het een kolom-scheiding is

[Da Weef]

Verwijderd schreef op maandag 21 september 2009 @ 15:22:
Het combineren van float:left met float:right wil in IE7 nog wel eens voor onverwachte resultaten zorgen. Probeer het eens met float:left op beide inner div's te plaatsen? Dat zou in essentie hetzelfde moeten zijn.

Heb je een voorbeeld of een referentie? Ik gebruik namelijk een vergelijkbare techniek voor een eigen website.

Behalve een afwijkende behandeling van margins/paddings, ben ik niet bekend met de door jou genoemde onverwachte resultaten...


@Thanatos: Met absolute positioning heb je dan nog steeds het 'probleem' dat de rechter div altijd 50% van de viewport is i.p.v. 50% van de container. Bovendien gebruik ik liever geen absolute positionering in mijn centrale lay-out (als die verder niet absoluut gepositioneerd is)

[ Voor 19% gewijzigd door Da Weef op 21-09-2009 17:50 ]