[css] 3-kolom layout met zelfde lengte

[RainerSGF]

Ik poog tevergeefs om een 3-kolommen layout te maken met elk dezelfde lengte (de linker en de rechter kolom moeten zo altijd dezelfde lengte hebben als de midden div-kolom met de inhoud). Zo erg hé dat precies zoiets belachelijk simpels me totaal niet lukt... . Zelfs met voorgetoonde layout-voorbeelden lijkt het me niet te lukken, wat doe ik verkeerd?

code:

<div id="main">
<div id="sidebar-first"></div>
<div id="content">
     <p>abcdefghij</p>
     <p>abcdefghij</p>
     <p>abcdefghij</p>
     <p>abcdefghij</p>
     <p>abcdefghij</p>
</div>
<div id="sidebar-second"></div>
</div>

CSS

code:

#content{
    
    height: 100%;
    //margin: 0 200px;
    width: 60%;
    vertical-align: top;
}

#content div{
    background: #00cbff;
    color: #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding-left: 5px;
    padding-right: 2px;
}

#main{
    background: #00cbff;
    margin-top: 25px;
    //min-height: 700px;
    //height: 100%;
    opacity: 0.5;
    padding: 0px 0px 0px 0px;
    width:1318px;
    //z-index:1;
}
#main div{
    display: inline-block;
    //margin: 0px 0px 0px 0px;
}

#sidebar-first {    
    background:#00cbff;
    opacity: 0.5;
    /*width:220px;*/ width: 15%;
}

#sidebar-second {
    background:#00cbff;
    opacity: 0.5;
    /*width:220px;   for IE5/WIN */ 
    width: 13%;
}

[robdejongNL]

Kort antwoord: Faux Columns gebruiken. Soort van optisch bedrog of je moet het willen oplossen met fixed heights of dezelfde hoogtes forceren via JavaScript.

[Verwijderd]

Zoeken op "3 kolommen" in Webdesign, Markup & Clientside Scripting levert een shitload aan topics op. Zullen we eens beginnen met niet herhalen wat we in al die andere topics al hebben gezegd? Het lijkt me een stuk handiger als de topicstarter eerst maar eens een paar van die topics gaat lezen.

[Spinal]

Welke IE-versie wil/moet je ondersteunen? Als je mazzel hebt en IE10+ een optie is, kun je kijken naar Flexbox (zie tab Resources)

[RainerSGF]

@Cheetah, je hebt inderdaad gelijk. Vergeef het me dat ik hier nogmaals een topic aan hetzelfde toevoeg. Had nochtans eerst gezocht in de topcis, maar ergens lukte het me toen toch niet (mijn fout natuurlijk).

Toch bedankt allen om mij een antwoord te hebben willen bieden. T'is nu gelukt ook.
@Robjuh, je korte antwoord was inderdaad ook voldoende.
3 kolom layout technieken

[HansvDr]

Ik gebruik gewoon display: table in combinatie met display:table-cell.

Werkt vanaf IE8 en in alle andere browsers.

Zie: http://www.digital-web.co..._know_about_CSS_Is_wrong/