[html/css] uitlijning bij three column lay-out

[Dennis]

Ik heb een stuk html met drie kolommen. In al deze kolommen heb ik 'chapters'. In Internet Explorer wordt dit juist weergegeven, maar in Firefox totaal niet. De html is als volgt:

HTML:

            <div class="ContentWrapper">
                <div id="threecolumn_left">
                    <div class="Chapter">tekst</div>
                    <div class="Chapter">tekst</div>
                </div>

                <div id="threecolumn_right">
                    <div class="Chapter">tekst</div>
                    <div class="Chapter">tekst</div>
                </div>

                <div id="threecolumn_middle">
                    <div class="Chapter">tekst</div>
                    <div class="ClearAll">
                        &nbsp;
                    </div>
                </div>
            </div>

De css die hierbij hoort is als volgt:

Cascading Stylesheet:

.ContentWrapper
{
    margin: 0px auto 0px auto;
    width: 776px;
    background-color: White;
}

#threecolumn_left
{
    float: left;
    width: 25%;
    background-color: #ffffff;
}

#threecolumn_middle
{
    margin-left: 25%;
    margin-right: 25%;
    border-left: 1px dotted #316194;
    border-right: 1px dotted #316194;
}

#threecolumn_right
{
    float: right;
    width: 25%;
}

.Chapter
{
    margin: 2px;
    font-size: small;
    font-weight: bold;
    background-color: #316194;
    color: White;
    padding: 2px;
}

Zie het plaatje hieronder. De linker en rechter area's (die floaten) worden wel goed weergegeven (groene pijlen), de centrale kolom niet (rode pijl, geel streepje).



Iemand enig idee waar dit aan ligt of is het een bug in FireFox?

[frickY]

Ik heb persoonlijk een schijthekel aan floats, en vermijd ze dan ook altijd.

Probeer het eens met

Cascading Stylesheet:

.ContentWrapper 
{ 
    margin: 0px auto 0px auto; 
    width: 776px; 
    background-color: White; 
    position: relative;
} 

#threecolumn_left 
{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 25%; 
    background-color: #ffffff; 
} 

#threecolumn_middle 
{
    margin-left: 25%; 
    margin-right: 25%; 
    border-left: 1px dotted #316194; 
    border-right: 1px dotted #316194; 
} 

#threecolumn_right 
{ 
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25%; 
} 

.Chapter 
{ 
    margin: 2px; 
    font-size: small; 
    font-weight: bold; 
    background-color: #316194; 
    color: White; 
    padding: 2px; 
}

[crisp]

Geef je .ContentWrapper een overflow: auto of overflow: hidden

frickY: zoveel mogelijk in de flow werken heeft toch wel degelijk de voorkeur boven absolute positioning...

[Boelie-Boelie]

Ter aanvulling:

Wat voor doctype heb je? Voor layouts kan dat best wat uitmaken. Als je zorgt dat browsers in Standards mode renderen, wil dat meestal wel wat positioneringsproblemen wegnemen.

Verder kun je beter in Firefox of Opera testen en achteraf specifieke aanpassingen doen om de layout in IE goed te krijgen. Fouten in weergave in IE zijn er in overvloed en daarom goed gedocumenteerd. Firefoxlayoutbugs zijn zeeer zeldzaam.

Absoluut positioneren is zeker niet beter dan floats. Mocht je nog behoefte hebben aan een tutorial:
- MaxDesign: tutorial over drie-kolomslayout met floats
- Stijlstek: drie-kolomslayout met floats en negatieve margins
- Joshua Ink: drie-kolomslayout met floats en negatieve margins

[Dennis]

Ik heb het in standards compliant mode (xhtml 1.1). Absolute positioning is geen optie omdat de breedte en positie kan wijzigen (het is iets dat op meerdere sites wordt toegepast).

Ik zal vrijdag die overflow auto of hidden eens proberen.

[crisp]

Je weet dat je XHTML 1.1 eigenlijk niet als text/html mag versturen?
En dat je lijdt aan het smurfentaal-syndroom? (oftewel: je gebruikt overal divjes voor, ook daar waar andere HTML-elementen veel beter gebruikt kunnen worden)

[ Voor 55% gewijzigd door crisp op 24-11-2005 00:02 ]

[Verwijderd]

Boelie-Boelie schreef op woensdag 23 november 2005 @ 19:12:
Verder kun je beter in Firefox of Opera testen en achteraf specifieke aanpassingen doen om de layout in IE goed te krijgen. Fouten in weergave in IE zijn er in overvloed en daarom goed gedocumenteerd. Firefoxlayoutbugs zijn zeeer zeldzaam.

Ben ik niet met je eens
Als je weet wat het probleem is, is reverse engineering ook nog mogelijk.. En naar mijn mening ga je eerst proberen je zaken op orde te krijgen voor het grootste gedeelte van je doelgroep (en dat zou natuurlijk ook Firefox of Opera kunnen zijn, maar dat is meestal niet zo), om daarna je code écht cross-platform te maken. Ik heb bij mezelf namelijk gemerkt dat er altijd minimale verschillen blijven.. Deze neem ik op de koop toe, omdat non-IE-browsers nog steeds maar een relatief klein deel van het oh-zo-grote Internet innemen.

[crisp]

Verwijderd schreef op donderdag 24 november 2005 @ 00:25:
[...]

Ben ik niet met je eens
Als je weet wat het probleem is, is reverse engineering ook nog mogelijk.. En naar mijn mening ga je eerst proberen je zaken op orde te krijgen voor het grootste gedeelte van je doelgroep (en dat zou natuurlijk ook Firefox of Opera kunnen zijn, maar dat is meestal niet zo), om daarna je code écht cross-platform te maken. Ik heb bij mezelf namelijk gemerkt dat er altijd minimale verschillen blijven.. Deze neem ik op de koop toe, omdat non-IE-browsers nog steeds maar een relatief klein deel van het oh-zo-grote Internet innemen.

mwa, daarmee zou je jezelf wel eens in de vingers kunnen snijden wanneer IE7 uitkomt

[Verwijderd]

crisp schreef op donderdag 24 november 2005 @ 00:26:
[...]

mwa, daarmee zou je jezelf wel eens in de vingers kunnen snijden wanneer IE7 uitkomt

Mja, dat zien we tegen die tijd (of het liefst vlak voor die tijd natuurlijk) wel weer
Ontwikkeling is niet tegen te gaan en stilstand blijft achteruitgang. Ook qua design

[Dennis]

crisp schreef op woensdag 23 november 2005 @ 18:52:
Geef je .ContentWrapper een overflow: auto of overflow: hidden

Beide oplossingen werken niet goed omdat ze scrollbalken genereren. Helaas geen oplossing dus .

[ Voor 35% gewijzigd door Dennis op 25-11-2005 08:48 . Reden: Het werkt toch niet... ]

[Salandur]

het lijkt erop dat de padding of de margin niet helemaal lekker is in je linker en rechter kolom, zet deze eens op 0

[Dennis]

Salandur schreef op vrijdag 25 november 2005 @ 08:44:
het lijkt erop dat de padding of de margin niet helemaal lekker is in je linker en rechter kolom, zet deze eens op 0

Nou die is iig wel goed .

Het grappige is dat als ik chapter een padding van 4px; geef en een margin van 0px; het wél in beide browsers probleemloos werkt.

[crisp]

Salandur schreef op vrijdag 25 november 2005 @ 08:44:
het lijkt erop dat de padding of de margin niet helemaal lekker is in je linker en rechter kolom, zet deze eens op 0

Dat kan het niet zijn aangezien div's default geen padding of margin hebben.
Dit heeft alles te maken met collapsing margins. Door het parent-element een vorm van overflow te geven anders dan 'visible' voorkom je dat de margins van child-elementen collapsen.