[CSS] divs met float in midden van viewport houden? - Softwareontwikkeling

vrijdag 23 juli 2010 12:56

Acties:

Topicstarter

Hoi Tweakers, ik heb een probleem met het opmaken van een website waar ik niet goed uit kom.

De opzet is deze: ik wil graag een div maken in de body van mijn HTML pagina die 3x zo groot is als de main div (waar de tekst van de website op komt). De main div wil ik 450px breed hebben, de betreffende div, container wordt dus 1350px breed. Deze div wil ik vervolgens in het midden van de viewport uitlijnen (door margin left en right op auto te zetten?). Bij sommige schermresoluties valt dus iets links en rechts uit beeld, maar dat is juist de bedoeling.

In de container div wil ik drie andere divs maken, menu, main en right. Alledrie zijn ze 1/3 van de breedte van de container.
Plaatje van hoe ik het er uit wil hebben zien (klikbaar):
[url=dead]-dode link-[/url]

Bij een grote schermresolutie is dat alles in beeld, bij kleinere resoluties valt links en rechts evenveel uit beeld. Tenminste, dat is het gewenste resultaat. Wat ik nu echter krijg is dat wanneer ik de drie divs met float:left in de container zet, de container niet meer in het midden van de viewport is uitgelijnd omdat het menu aan de linkerkant tegen de linkerkant van het browservenster aan komt te staan.

De CSS en HTML code die ik nu heb is:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" title="breed" media="screen" href="breed.css" />
<title>Breed</title>
</head>

<body>
<div class="container">
    <div class="menu">
        menu
    </div>
    <div class="main">

        main
    </div>
    <div class="right">
        right
    </div>
</div>
</body>
</html>

Cascading Stylesheet:

@charset "utf-8";
/* CSS Document */

body {
    margin:0; padding:0;
    background-color:#000;
    text-align:center;
}

.container {
    margin-left:auto; margin-right:auto; margin-top:50px; padding:0;
    text-align:left; 
    width:1362px; height:700px;
    background-color:#FFF;
}

.main {
    margin:0; padding:0;
    width:454px; height:700px; float:left;
    background-color:#03F;
}

.menu {
    margin-top:0px; padding:0px;
    width:454px; height:400px; float:left;
    background-color:#900;
}

.right {
    margin:0; padding:0;
    width:454px; height:700px; float:left;
    background-color:#000;
    color:#fff;
}

Wat ik wil bereiken? Ik wil graag dat de main klasse altijd in het midden van de pagina staat, en dat de linker en rechter vlakken relatief aan de positie van main vast zitten, respectievelijk aan de linker en aan de rechterkant. Hierbij is het ook de bedoeling dat de vlakken aan de beide kanten uit het beeld gaan vallen wanneer de schermresolutie niet groot genoeg is.

Ik hoop dat jullie me hierbij kunnen helpen, omdat ik nog niet zo lang bezig ben met opmaak van pagina's.

Alvast bedankt.

vrijdag 23 juli 2010 13:24

Acties:

Verwijderd

Je gebruikt op dit moment de margin techniek om je div (container) te centreren. Op deze manier houdt de browser ook rekening met de groote van de viewport. Als een deel van je div dus buiten de viewport valt zal dit problemen op leveren. Daarom kan je misschien beter een andere manier van centreren kiezen. Hier wat CSS markup:

code:

.container {
    position:absolute;
    left:50%
    margin-left:-681px /* de helft van de gehele breedte */

    margin-top:50px; 
    padding:0;
    text-align:left; 
    width:1362px; height:700px;
    background-color:#FFF;
}

vrijdag 23 juli 2010 13:39

Acties:

Struikrover

Topicstarter

Ruban,

Bedankt voor je hulp, jouw manier van centeren blijkt te werken, de main blijft nu inderdaad in het midden van de viewport staan

.
Het antwoord lijkt zo simpel, maar als je net begint met CSS opmaak zijn er vaak voor je gevoeg zoveel manieren om iets voor elkaar te krijgen dat zulk soort dingen best lastig zijn om uit te moeten vogelen.
Verder lijkt het me een logische en nette manier. Als ik al problemen tegen kom verderop dan zal ik ze hier nog posten.

Thanks

[ Voor 27% gewijzigd door Struikrover op 23-07-2010 13:40 ]

vrijdag 23 juli 2010 17:41

Acties:

Struikrover

Topicstarter

Ik heb nog een klein probleem met betrekking tot de opmaak van mijn webpagina.

De main div staat nu mooi in het midden van de pagina, alles is zoals het moet, behalve dat ik aan de onderkant van de pagina geen margin tevoorschijn kan toveren. Zoals je hier kunt zien heb ik de pagina extra lang gemaakt, zodat je moet scrollen (ik wel in ieder geval

). in de CSS staat dit:

Cascading Stylesheet:

.container {
    position:absolute;
    left:50%;
    margin-left:-681px;
    margin-top:30px; margin-bottom:30px;
    padding:0;
    text-align:left;
    width:940;
    background-color:#999
}

Dus zowel een margin-top als een margin-bottom van 30px. Alleen de onderste verschijnt niet. Heeft dit te maken met het feit dat er geen content onder staat en dat de browser de ruimte dus niet rendert? Zo ja, hoe zou ik dat anders moeten doen?

Alvast bedankt

EDIT:

Zoals je nu zelf kunt zien in de URL die ik gaf verspringt de main nu als het browservenster te klein wordt gemaakt. Is er ook een manier waarop ik dat kan voorkomen? Dat is natuurlijk in geen geval wenselijk.

[ Voor 11% gewijzigd door Struikrover op 23-07-2010 18:17 ]

zaterdag 24 juli 2010 02:44

Acties:

Yoram

Ik weet niet precies wat je uiteindelijk wilt met je lay-out, maar dit leek mij leuk om uit te proberen. Ik ben tot dit gekomen:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testje</title>
<style type="text/css">
<!--
body {
    margin: 0px;
}
div.main{
    width:1500px;
    margin-left:-750px;
    left:50%;
    position:relative;
    margin-bottom:30px;
    margin-top:30px;
}
div.left{
    width:500px;
    float:left;
    background-color:#933;
    height:1000px;
    text-align:right;
    padding-bottom:80px;
}
div.mid{
    width:600px;
    float:left;
    background-color:#933;
    height:100%;
}
div.midContent{
    background-color:#999;
    margin:20px;
    padding:20px;
    height:1000px;
}
-->
</style></head>

<body>
<div class="main">
    <div class="left">linkerkant</div>
    <div class="mid">
        <div class="midContent">bla die inhoud</div>
    </div>
</div>
</body>
</html>

Sinds kort heb ik me eigenlijk gerealiseerd dat CSS en DIVs alleen maar duwen en trekken is. Dus bij deze. Gratisch en voor niks

[ Voor 4% gewijzigd door Yoram op 24-07-2010 02:45 ]

Hallo!

zaterdag 24 juli 2010 03:02

Acties:

MrVegeta

! Dolf is rechtvaardig !

Struikrover schreef op vrijdag 23 juli 2010 @ 17:41:

Je probleem met de margin onder kan je (denk ik) verhelpen met een padding-bottom aan te geven aan menu.

Het verspringen is een beetje gek, zie zo niet waar het door komt maar het komt wss door position:absolute;. Ik zal net als de poster hierboven even een klein stukje code voor je tikken waarmee je jou website verder kan helpen.

Wat ik voor je heb gemaakt is vrij simpel,
4 divs;

1 om de content te centeren en ruimte tussen de boven/onderkant te geven,
1 om de content mee te containen (kan je er uithalen maar is voor de duidelijkheid handig imo),
1 div links voor het menu,
1 div rechts voor je content,

Denk dat dat wel is wat je bedoelt,

Cascading Stylesheet:

BODY {
    margin:0px;
}
            
#center{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: left; /*voor IE */
    overflow: hidden;
    margin: 0 auto;
    padding-top:30px;
    padding-bottom:30px;
    }
    
#container{
}

#menu{
    height: 1400px;
    background-color: yellow;
    width:450px;
    float:left;
}

#main{
    height: 1400px;
    background-color: green;
    width:450px;
    float:left;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen" />

    <title>Portfolio</title>

</head>
<body>
<div id="center">
    <div id="container">
        <div id="menu">menu</div>
        <div id="main">main</div>
    </div>
</div>
</body>
</html>

In je container kan je dus allerlei divjes en opmaak doen enzo terwijl de content _altijd_ in het midden blijft.

[ Voor 79% gewijzigd door MrVegeta op 24-07-2010 03:19 ]

Geeft steekhoudelijke argumenten terwijl hij niet weet waar het over gaat. BlizzBoys, HD casts van StarCraft II gemaakt door Tweakers! Het begint, Zombiepocalyps

zaterdag 24 juli 2010 14:54

Acties:

Struikrover

Topicstarter

Dank je voor jullie reacties, zal er even op in gaan

.

Omdat Yoram vroeg wat het doel is:
Het doel is dat er een website gemaakt wordt die er op een kleine en een grotere resolutie goed uit ziet. Dat wil ik proberen te bereiken door op een kleine resolutie het effect te geven van een 'vlak', de container, die zich vanuit oneindig links in beeld lijkt uit te strekken tot het midden van het beeld, waar er een content vlak in komt te staan. Echter, wanneer de resolutie groter wordt zal blijken dat de container zich niet oneindig naar links uitstrekt maar slechts een x aantal pixels, waardoor het er op grotere schermen dus uit ziet als een vlak dat a-symmetrisch op het scherm geplaatst is.

@MrVegeta: Dank je voor je inzet, maar het was eigenlijk de bedoeling dat alleen de main gecentreerd zou worden, en niet de hele container. Dit wilde ik eerst met alleen float properties voor elkaar krijgen, maar zowel float:left als float:right geven het effect dat het element wat je float geeft niet buiten de viewport terecht wil komen, zoals je ook in jouw voorbeeld kunt zien. Dus je zult met een absolute positie moeten werken, denk ik.

Het verspringen, overigens, kwam blijkbaar door een verkeerde toepassing van width in combinatie met margin + padding. Wanneer ik beide 0 maakte versprong het vlak niet, wanneer ik margin en padding in ging stellen versprong de pagina gelijk.

@Yoram: Jouw voorbeeld lijkt goed te gaan, al weet ik het verschil niet zo goed te zien tussen position:relative en position:absolute. Het is wel zo dat je m'n container nu 1500px breed hebt gemaakt, terwijl eigenlijk maar 1000 pixels nodig was geweest.

Ik begrijp dat ik hierboven drie vlakken heb getekend in mijn plaatje, dus laat ik nogmaals een overzicht maken van de situatie en waar ik op vastloop:

[url=dead]-dood-[/url] is de originele situatie. Je kunt in de broncode kijken hoe de HTML en CSS in elkaar zitten, dat scheelt hier ruimte, maar menu en main zijn even groot, beide zijn float:left, de container is absoluut gepositioneerd en beide hebben geen marge.

[url=dead]-dood-[/url] is de situatie waarin het mis gaat. De container is nog steeds hetzelfde, menu en main zijn beide nog even groot (de helft van de container, dus geen speling), maar nu heb ik de main een margin gegeven van 15px, en een padding van 40px. Ik moest de container wel minder naar links laten opschuiven, namelijk 65 pixels minder. Nu snap ik dat het door de margin en padding fout zou kunnen gaan, dat ze op de een of andere manier bij de breedte opgeteld moeten worden, maar hoe precies? Dat zou ik graag willen weten. Wat ik er van begreep is het zo dat margin bij de breedte opgeteld moet worden, maar padding er alleen voor zorgt dat de inhoud meer naar binnen wordt gedrukt, niet dat het element zelf breder wordt.

[url=dead]-dood-[/url] is de situatie waarin het wel goed gaat. De container is hetzelfde, maar ik heb menu nu maar 200px breed gemaakt ipv gelijk aan main (450px). Hierdoor is er speling in de container. Bovendien heb ik nu beide float:right gemaakt omdat ze anders niet meer op dezelfde plek staan. Als ik de main nu margin en padding van respectievelijk 15px en 40px geef is er niks aan de hand, zootje blijft gewoon staan.

In alledrie de gevallen is het nog wel zo dat de container geen margin-bottom heeft, ik houd geen lege ruimte onder de container over wanneer er gescrollt moet worden, en dat vind ik lelijk en zou ik graag anders zien.

Ik hoop dat jullie me nog steeds kunnen helpen

Alvast bedankt.

zaterdag 24 juli 2010 15:11

Acties:

MrVegeta

! Dolf is rechtvaardig !

Pffoeeh.

Een beetje een raar verhaal als ik eerlijk ben, maar je wil dus je content in het midden hebben en je menu wil je links van je content hebben. Dat ziet er imo wat raar uit maar het is wel haalbaar.

Geeft steekhoudelijke argumenten terwijl hij niet weet waar het over gaat. BlizzBoys, HD casts van StarCraft II gemaakt door Tweakers! Het begint, Zombiepocalyps

zaterdag 24 juli 2010 15:28

Acties:

Killemov

Ik zoek nog een mooi icooi =)

Gezien dat je layout ipc fixed is lijkt je originele aanpak mij toch het beste. Je moet alleen niet met float aan de gang maar de container position:absolute geven en de binnenste 3 divs position:relative. Verder centreer je de container wel met margin-left:auto en margin-right: auto.

Dan volgt er een keuze: scrollen of niet.

Bij wel scrollen moet je javascript gebruiken om de viewport even goed te zetten. Zie: http://13thparallel.com/archive/viewport/
Bij niet scrollen zul je naar een omhullende div (of de body zelf) moeten kijken waaraan je overflow:hidden toevoegt.

Ik kan firefox+firebug aaanraden voor het pielen met css.

Hey ... maar dan heb je ook wat!

zaterdag 24 juli 2010 15:44

Acties:

MrVegeta

! Dolf is rechtvaardig !

http://jsbin.com/onode3/

Check die even, je hebt nu een main content div in het midden en links daarvan een menu div die links zit. Is dit wat je bedoeld?

Mocht dit zijn wat je bedoeld dan kan je rechtsboven klikken op "edit" en de code er uit vissen.

[ Voor 24% gewijzigd door MrVegeta op 24-07-2010 15:49 ]

Geeft steekhoudelijke argumenten terwijl hij niet weet waar het over gaat. BlizzBoys, HD casts van StarCraft II gemaakt door Tweakers! Het begint, Zombiepocalyps

zaterdag 24 juli 2010 21:21

Acties:

Struikrover

Topicstarter

@MrVegeta:

Thanks voor je moeite! Jouw versie is in ieder geval een manier waarop ik het werkend zou kunnen krijgen. In principe was het in mijn geval mooi geweest als ik zowel de main als het menu door de container omgeven had kunnen laten worden. Jouw voorbeeld heeft een #center breedte van 450px, de breedte van de main, zodat menu er in principe al buiten valt, ookal heb je hem wel in de #center div genest...

Ik heb je voorbeeld aangepast aan wat ik zou willen, en op deze manier werkt het ook:

http://jsbin.com/onode3/3/

Ook nog even middels een plaatje de structuur uitgelicht (klikbaar):
[url=dead]-dode link-[/url]
Dus prima, hartstikke mooi zou je zeggen, toch? Helaas pindakaas. Zolang mijn .content{} (jouw #center) maar een vaste hoogte heeft in combinatie met position:relative lukt het prima voor de div er omheen (.container{}) om er een padding-bottom aan te geven. Zonder die hoogte verschijnt de content box echter helemaal niet meer

:

http://jsbin.com/onode3/4/
Zoals je in de CSS kunt zien heb ik alleen bij .content de 'height:1200px;' weggehaald.

Ik neem aan dat dit een gevalletje jammer maar het kan zo gewoon niet is?

[ Voor 8% gewijzigd door Struikrover op 10-12-2010 07:46 ]

zondag 25 juli 2010 02:43

Acties:

MrVegeta

! Dolf is rechtvaardig !

Hm, waarom wil je graag je menu/main in een div hebben staan? Heeft het te maken met een achtergrond plaatje oid? Op mijn manier staat het toch goed?

Geeft steekhoudelijke argumenten terwijl hij niet weet waar het over gaat. BlizzBoys, HD casts van StarCraft II gemaakt door Tweakers! Het begint, Zombiepocalyps

zondag 25 juli 2010 12:10

Acties:

Struikrover

Topicstarter

Klopt, op jouw manier staat het goed, maar laat ik even een gedeelte van het ontwerp posten (klikbaar):

Afbeeldingslocatie: http://www.hetvatontwerpt.nl/temp/layout_klein.jpg

Zoals je ziet is het de bedoeling dat het menu en de main in dezelfde 'box' komen te zitten, de box die een gedeeltelijk doorzichtige achtergrond heeft. Op jouw manier kan ik die box niet maken en mee laten schalen met de main, omdat hij alleen boven en onder de main zelf zit, en niet meer links ervan uitsteekt.

Zou ik eventueel ook Deze manier kunnen gebruiken, en dan onder de container nog een footer met vaste grootte en lege inhoud kunnen maken? Op die manier zou de pagina ook nog een stukje op moeten rekken toch?

zondag 25 juli 2010 13:56

Acties:

Struikrover

Topicstarter

Sorry voor de doublepost, maar ik wilde even zeggen dat ik een manier heb gevonden om de pagina zo te maken als ik wilde.

Het bleek dus dat bij een relatief gepositioneerd vlak met een variabele hoogte de margin-bottom niet verscheen. Daarom heb ik maar een klasse voor <p> gemaakt die zorgt voor een clear:both, width:100% en height:50px om een soort 'spacer' te maken die ik onder en boven het container element plaats.

Dit lijkt mij de meest nette manier, waardoor ik nog steeds het menu en de main beide in de relatief gepositioneerde container kan plaatsen in verband met transparante achtergrond en mijn hele layout opzet. De code en het resultaat:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test</title>
    <link rel="stylesheet" href="test2.css" type="text/css" media="all" />
</head>
 
<body>
    <p class="spacer" />
    
    <div class="content">
        <div class="main">
            <!--tekst hier -->
        </div>

        <div class="menu">
            menu
        </div>
    </div>
    
    <p class="spacer" />
</body>
</html>

Cascading Stylesheet:

body {
    background-color:#000;
    font-family:Georgia, Times, serifs;
}

.container {
    clear:both;
    position:relative; left:50%;
    margin-left:-600px;
    width:800px;
    overflow:auto;
    background:#CCC;
    border:0px solid #000;
}

.main {
    float:right; width:400px;
    background-color:#FFF;
}

.menu {
    float:right; width:150px;
    color:#000; 
}

.spacer {
    clear:both;
    margin:0px; padding:0px;
    width:100%; height:50px;
}

Ik denk dat dit de meest nette manier is, wat vinden jullie?

In ieder geval bedankt voor ieders inzet, ik heb weer een hoop dingen bijgeleerd

zondag 25 juli 2010 13:58

Acties:

MrVegeta

! Dolf is rechtvaardig !

Ik geloof niet dat je een <div> in een <p> mag zetten, waarom moet het een <p> zijn?

http://validator.w3.org/c...y)&doctype=Inline&group=0 hm okay bij TRANS nog wel, kan je wel aanraden om een strict doctype te gebruiken, die werkt beter met verschillende browsers

Maar het lijkt allemaal goed te werken

[ Voor 67% gewijzigd door MrVegeta op 25-07-2010 14:01 ]

Geeft steekhoudelijke argumenten terwijl hij niet weet waar het over gaat. BlizzBoys, HD casts van StarCraft II gemaakt door Tweakers! Het begint, Zombiepocalyps

zondag 25 juli 2010 14:03

Acties:

MueR

Admin Devschuur® & Discord

is niet lief

MrVegeta schreef op zondag 25 juli 2010 @ 13:58:
Ik geloof niet dat je een <div> in een <p> mag zetten, waarom moet het een <p> zijn?

Dat doet ie dan ook niet. Goed kijken

Overigens wel met je eens dat het geen <p> hoort te zijn, daar doet een div/hr het prima.

Anyone who gets in between me and my morning coffee should be insecure.

zondag 25 juli 2010 14:06

Acties:

MrVegeta

! Dolf is rechtvaardig !

Oh ik zie het ja, <p /> ik sluit mijn <p> nooit zo af

, dacht al...

Geeft steekhoudelijke argumenten terwijl hij niet weet waar het over gaat. BlizzBoys, HD casts van StarCraft II gemaakt door Tweakers! Het begint, Zombiepocalyps

zondag 25 juli 2010 14:09

Acties:

R4gnax

Struikrover schreef op zondag 25 juli 2010 @ 13:56:
Het bleek dus dat bij een relatief gepositioneerd vlak met een variabele hoogte de margin-bottom niet verscheen.

Dat zal eerder iets van doen hebben met het fenomeen margin collapsing dan met een relatief gepositioneerd element.

Je zou eens kunnen proberen padding i.p.v. margin te gebruiken. Of margin i.c.m. een 1px hoge padding, aangezien margins niet samengevoegd mogen worden over een padding (of border) edge. Dan heb je dat soort lelijke spacer tags niet nodig.

zondag 25 juli 2010 16:16

Acties:

Struikrover

Topicstarter

R4gnax schreef op zondag 25 juli 2010 @ 14:09:
[...]

Dat zal eerder iets van doen hebben met het fenomeen margin collapsing dan met een relatief gepositioneerd element.

Je zou eens kunnen proberen padding i.p.v. margin te gebruiken. Of margin i.c.m. een 1px hoge padding, aangezien margins niet samengevoegd mogen worden over een padding (of border) edge. Dan heb je dat soort lelijke spacer tags niet nodig.

Ik heb even gekeken en ik weet niet of margin collapsing echt voor kan komen bij mij. Zou je misschien voor me kunnen kijken of je met margin en/of padding hetzelfde als wat ik nu heb voor elkaar kunt krijgen? Ik ben er ondertussen lang mee bezig geweest maar krijg het niet voor elkaar

maandag 26 juli 2010 00:49

Acties:

R4gnax

Struikrover schreef op zondag 25 juli 2010 @ 16:16:
[...]

Ik heb even gekeken en ik weet niet of margin collapsing echt voor kan komen bij mij. Zou je misschien voor me kunnen kijken of je met margin en/of padding hetzelfde als wat ik nu heb voor elkaar kunt krijgen? Ik ben er ondertussen lang mee bezig geweest maar krijg het niet voor elkaar

De enige browser die problemen heeft met het niet juist zetten v/e margin-bottom op de container class is IE7. Ook IE8 doet het goed. Het lijkt er dan ook op dat je één v/d vele margin collapsing bugs i.c.m. 'hasLayout' raakt in IE6/7.

Een workaround kan zijn om een padding-top / -bottom op de body tag te zetten en je spacers weg halen. Zou in elk geval onder IE7, IE8 en Firefox moeten werken.

Waarom de 'clear' eigenschap op de container class trouwens? Er zitten floats in de container, niet er voor. (De overflow: auto declaratie werkt wel, maar vind ik persoonlijk een erg smerige manier, daar deze methode in essentie afhankelijk is van een 'bijwerking'.)

maandag 26 juli 2010 09:53

Acties:

Struikrover

Topicstarter

R4gnax schreef op maandag 26 juli 2010 @ 00:49:
[...]

De enige browser die problemen heeft met het niet juist zetten v/e margin-bottom op de container class is IE7. Ook IE8 doet het goed. Het lijkt er dan ook op dat je één v/d vele margin collapsing bugs i.c.m. 'hasLayout' raakt in IE6/7.

Een workaround kan zijn om een padding-top / -bottom op de body tag te zetten en je spacers weg halen. Zou in elk geval onder IE7, IE8 en Firefox moeten werken.

Waarom de 'clear' eigenschap op de container class trouwens? Er zitten floats in de container, niet er voor. (De overflow: auto declaratie werkt wel, maar vind ik persoonlijk een erg smerige manier, daar deze methode in essentie afhankelijk is van een 'bijwerking'.)

Het zou kunnen dat het waar is wat je zegt m.b.t. de margin, maar ik kom het verschijnsel ook tegen in firefox... ik heb de body nu een top en bottom padding gegeven, dat werkt ook prima en ik vind dit wel de beste oplossing. Zie ook niet zo in hoe dit een workaround genoemd kan worden, daar het gewoon een duidelijke mogelijkheid van de CSS is, zonder dat het 'vies' staat of uit gaat van fout geinterpreteerde neveneffecten

Verder, of die overflow property: zoals ik al zei weet ik nog maar weinig over CSS. Ik heb de property weggehaald en opeens bestond de container niet meer. Op 'hidden' komt hij weer tevoorschijn. Wat zorgt er dan voor dat ik door een 'bijwerking' iets doe wat werkt?

Pagina: 1

Reageer