Beste sd-leden,

Op dit moment ben ik bezig met een groot project. Echter, ik stuit op een probleem. Dat probleem is als volgt:

Ik ben bezig om een tabel na te bouwen door middel van HTML en CSS. Dit doe ik omdat ik dit nodig heb voor de jQuery-code. Het probleem ligt het bij het feit dat ik de kolommen niet evenredig krijg met elkaar. Dit probleem heb ik voor IE8 en FF 2/3 wel kunnen oplossen met display:table en display:table-cell. In IE7 werkt deze mogelijkheid niet. Heeft iemand een alternatief wat ik kan gebruiken?

Het probleem wordt ook wel faux columns (alle kolommen even lang) genoemd.

Bij voorbaat dank.

Ik heb het gisteren zo opgelost, en het werkt ook in IE7, Firefox en Chrome.

CSS

#container
{
clear:left;
display: table;
background-color:#e5e5e5;
overflow: hidden;
}

#links
{
float:left;
padding:10px;
width: 615px;
min-height:500px;
height:100%;
background-color:#FFFFFF;
text-align:left;
font-family:arial;
font-size:12px;
color:#424242;
display: table-cell;
overflow: auto;
}

#rechts{
float:left;
width: 221px;
min-height:500px;
height:100%;
background-color:#e5e5e5;
text-align:left;
padding:9px;
clear:right;
display: table-cell;
}

HTML:

<div id="container">
<div id="links></div>
<div id="rechts></div>
</div>

Ik heb er nu dit van gemaakt:

Code:

.whitebox_large {
    width:740px;
    padding:0px;
    clear:left;
    display:table;
    overflow:hidden;
}

.small_box {
float:left;
width: 120px;
min-height:100px;
height:100%;
display: table-cell;
overflow: auto;
padding:10px;
}
.large_box {
float:left;
width: 178px;
min-height:100px;
height:100%;
background-color:#EAEAEA;
text-align:left;
padding:10px;
clear:right;
display: table-cell;
border-left:2px solid #CCC;
}

De HTML ziet er zo uit:

Code:

<div class="whitebox large_whitebox">
     <div class="small_box"></div>
     <div class="large_box"></div>
     <div class="large_box"></div>
     <div class="large_box"></div>
</div>

Maar het werkt niet.......

Probeer is overflow: auto; in de large box te zetten en hem uit de smallbox te halen.