CSS blok loopt niet door

[jeroendenoot]

Hallo,
Ik heb voor het eerst een lay-out omgezet naar HTML met DIV-tags in plaats van tabellen. Ik ben er heel lang mee bezig geweest voordat het cross-browser werkte:



Teminste, ik dàcht dat het werkte, maar dat was niet zo. Na een paar dagen kwam ik erachter dat als de rechter kolom korter is dan de linker, dat het dan mis gaat:



Kan iemand mij helpen dit op te lossen? In de bijlage is de broncode te vinden. Alvast bedankt.

 

[jeroendenoot]

Het is gelukt. Een DIV-tag van 0 pixels hoog onder de kolommen plaatsen met de waarde clear:both loste het op.

Nu is er nog één probleempje. De DIV-tag wordt in IE6 niet 0 pixels, maar 10 pixels hoog. Ook als line-height:0 is opgegeven.

 

[Johantrax]

probeer die div ook als waardes voor 'margin' en 'padding' eens exlipciet 0px te geven, IE staat gekend voor problemen/afwijkende interpretaties van die 2.

--Johan

 

[jeroendenoot]

probeer die div ook als waardes voor 'margin' en 'padding' eens exlipciet 0px te geven, IE staat gekend voor problemen/afwijkende interpretaties van die 2.

--Johan

Dat werkt helaas ook niet. Zelfde resultaat. De weergave is trouwens goed in IE7, FF en Opera, in andere browsers niet getest (behalve IE6 dan).

Edit: Ik zie trouwens het dat de hoogte 13 pixels wordt in plaats van 0 pixels en geen 10.

 

[peter vazed]

Heb je hier iets aan:
http://www.greywyvern.com/code/min-height-hack.html

 

[jeroendenoot]

Gevonden! Er moest een   in de DIV-tag staan.

Toch bedankt.

 

[jeroendenoot]

Toch nog een klein probleempje... De toegevoegde DIV-tag is nu overal 0 pixels hoog, alleen komt er in IE6 en IE7 nu een witruimte van 4 pixels onder de tag te staan.

Edit: Ook dat is weer opgelost, en wel met deze stijlregels (.dummy is de toegevoegde DIV-tag):

*:first-child+html .dummy
{
margin-bottom: -4px !important;
}

.dummy
{
clear: both;
height: 0;
line-height: 0;
margin-bottom: 0 !important;
margin-bottom: -4px;
}

 

[jeroendenoot]

Deze vraag is dus opgelost.