HTML div structuur browser compatibel maken.

[Rashura]

Beste mensen,

ik ben met een website bezig en heb een klein probleempje met 3 div's die op een rij staan.
Er zijn 3 div's Left, Content en Right die netjes op een rij moeten komen te staan.
Ik testte het in IE 7 en daar staat het prima, maar in andere browsers zoals safari en Firefox word de CONTENT div onder de LEFT en RIGHT div's getoond.

<Div id="middle" style="display: table">

<Div id="left" style="display: inline; float:left"></div>

<Div id="content" style="display: inline; float:left"></div>

<Div id="right" style="display: inline; float:right"></div>

</div>

Ik heb al van alles geprobeerd zoals alle displays en floats te veranderen, maar tot nu toe heb ik de juiste combinatie niet kunnen vinden.
Heb ook al geprobeerd een extra div om de 3 div's te plaatsen om via display een Table > Tablerow > Table Cell structuur op te bouwen maar ook dit werkte niet.
Als jullie mij kunnen vertellen hoe ik dit kan oplossen, alvast heel erg bedankt!!

ps: de div styles in dit voorbeeldje staan oorspronkelijk onder de div id's in een css file.

[ Voor 3% gewijzigd door Rashura op 29-09-2008 15:13 ]

[NMe]

Waarom een display:inline? En als je toch id's gebruikt, waarom heb je dan ook nog inline CSS? En minder belangrijk: het is <div>, niet <Div>. Nu open je sowieso feitelijk een andere tag dan degene die je sluit vanwege de hoofdletterverschillen. Je hebt mazzel dat dat de meeste browsers niet boeit.

Trouwens, postition: relative zou in combinatie met float: left prima moeten werken.

[ Voor 13% gewijzigd door NMe op 29-09-2008 15:15 ]

[Noork]

Sowieso zijn er genoeg voorbeelden van een 3 koloms layout te vinden: http://www.google.com/search?q=3+column+layout+css+example

[Goodfellas]

Net zoals in het andere topic met een soortgelijk onderwerp:

<div id="middle"">
<div id="middleLeft" style="float:left">
<div id="contentLeft" style="float:left"></div>
<div id="contentRight" style="float:right"></div>
</div>
<div id="middleRight" style="float:right"></div>
</div>

Nu heb je dus nog maar twee blokken en gaat het goed.

[Rashura]

Ik had dit even zelf getypt vandaar de <Div> ipv <div>....
Anyway heb Goodfellas's manier getest maar dan krijg ik in zowel FF als IE:

[Left]
[ content ]
[right]

Heb het ook geprobeerd zonder alle display: 's, maar blijft hetzelfde.

[NMe]

En wat ik zei?

[Rashura]

Ik heb de oplossing gevonden, althans voor safari, firefox en IE 7.
In IE 8 en Google chrome blijkt hij nog steeds dezelfde fout te geven.(heel raar)

Dankzij deze tutorial: http://www.shadow-fox.net...id-Center-and-Two-Columns

Oplossing:
<Div id="left" style=" float:left"></div>
<Div id="right" style=" float:right"></div>
<Div id="content"></div>
<Div id="middle" style="clear: both"></div>

Echt super simpel (al was ik zelf nooit achter die clear: both gekomen)

@ -NME- position: relative veranderde niets

[ Voor 5% gewijzigd door Rashura op 29-09-2008 16:05 ]

[Goodfellas]

Vreemd, probeer eens wat te rommelen met position en display. Ik heb het meerdere keren op die manier voor elkaar gekregen, kan alleen nu even niet kijken hoe het precies ging (irritante firewalls enzo).

Bovengenoemde oplossing vind ik niet heel mooi, naar mijn bescheiden mening zou je volgens het parent-child princiepe moeten blijven werken. De ervaring leert dat halve oplossingen je later in de eindfase gaan opspelen (voorbeeld: slechte div structuur zorgde bij mij voor een onwerkbaar drop-down menu).

succes!