CSS3 table layout met scroll bar in één van de cellen

[divvid]

Ik zit met een probleem in CSS3 en tabellen dat ik maar niet opgelost krijg, hopelijk kan iemand die wat beter in CSS3 is dan ik mij verder helpen of een alternatief aandragen:

randvoorwaarden: firefox of chrome, laatste versie, backward compatibiliteit is niet nodig, 't is voor een interne site, dus zoveel mogelijk cleane code en css.

Ik wil in mijn applicatie een twee kolommen layout. Een linker kolom waarin korte content komt en een rechter kolom waarin een SVG visualisatie komt. Deze visualisatie kan b.v. 900x800px zijn, maar soms groeien naar 3000x2000. Dit is geen probleem, er mag gescrolled worden (liever zelfs dan gepruts op de marge.)

De rechter kolom moet dus scroll bars krijgen zodra de content groter wordt dan de grootte van de rechter kolom.

Deze HTML heb ik nu:

HTML:

    <div id="content-body-wrapper">
        <div id="content-body">
            <!-- info side bar area -->
            <div id="leftcolumn">
                <p>info side bar</p>
            </div>

            <!-- main svg area -->
            <div id="rightcolumn">
                <div id="svgarea"></div>
            </div>
            <!-- End of main svg area -->
        </div>
    </div>

CSS

Cascading Stylesheet:

#content-body-wrapper {
   width: 100%;
}

#content-body {
    display:table-row;
    overflow-x:none;
    width: 1000px;
}

#leftcolumn {
    display:table-cell;
    width:100px;
    background: #dddddd;
}

#rightcolumn {
    display:inline-block;
    width:1000px;
    overflow-x: scroll;
}

Dit doet precies wat ik wil, een side area van 100px en de 'rightcolumn' div krijgt een horizontale scrollbar zodra de content groter wordt dan 1000px, mits de rightcolumn niet groter is dan de breedte van het browser scherm.

Wat me echter niet lukt is om de 'rightcolumn' automatisch op te laten vullen naar rechts, dus i.p.v. 1000px, zou het (100% van het browserscherm - 100px van de side bar) moeten worden. Maak ik de width van de content body 100% dan gaat het goed zolang de inhoud van de 'rightcolumn' div niet breder is dan het scherm. Wat er dan gebeurt is dat er een scrolbar komt in de hele browser en de rightcolumn div over de sidebar wordt geschoven en wordt het een lelijk geheel waarin je twee keer moet scrollen

[marko77]

Aangezien het voor intern gebruik is en je een goede browser gebruikt zou ik voor de javascript/jquery oplossing gaan. Daarmee moet je dit vrij eenvoudig kunnen doen. Puur css kan wellicht wel, maar kost vrij veel geneuzel.

[divvid]

't is dan ook voor mijn eigen begrip van CSS. Ik zou graag willen weten of en hoe het kan, maar anders is de jquery route inderdaad een optie.

[BtM909]

Daar heb je CSS3 helemaal niet voor nodig!

Waar heb je op gezocht, want een simpele zoektocht levert al genoeg voorbeelden op (zoals: http://blog.html.it/layoutgala/LayoutGala24.html)

Je hoeft dan alleen nog een overflow voor het juiste element te selecteren

Aangezien de meeste voorbeelden ook nog IE en andere hacks hebben, kan je met een simpele opschoningsactie de hacks verwijderen

[divvid]

Dank je wel, ik had een aantal van die css generator scripts geprobeerd, maar geen van allen deden ze wat ik wilde .Ik heb je suggestie uitgeprobeerd, een div van 2200px aan de content div toegevoegd en de content div een overflow:scroll gegeven. Dat werkt.

De Jquery optie overigens ook.

[CH4OS]

BtM909 schreef op maandag 17 september 2012 @ 17:43:
Waar heb je op gezocht, want een simpele zoektocht levert al genoeg voorbeelden op (zoals: http://blog.html.it/layoutgala/LayoutGala24.html)

Leuk, dergelijke vragen, maar geef dan ook aan waar je voor de TS op hebt gezocht, dan kan hij (en een ieder in de toekomst met een dergelijk probleem) rekening houden met gebruikt jargon ervoor.

P.S. Je Paul Elstak mash-up is nice...

[ Voor 5% gewijzigd door CH4OS op 17-09-2012 19:02 ]

[BtM909]

CptChaos schreef op maandag 17 september 2012 @ 18:55:
[...]
Leuk, dergelijke vragen, maar geef dan ook aan waar je voor de TS op hebt gezocht, dan kan hij (en een ieder in de toekomst met een dergelijk probleem) rekening houden met gebruikt jargon ervoor.

Ik zei niet voor niets:

Waar heb je op gezocht, want een simpele zoektocht levert al genoeg voorbeelden op

Juist de topicstarter moet aangeven waar hij op heeft gezocht. Wat betreft jargon: ik heb gewoon zijn titel in Google gefrot

P.S. Je Paul Elstak mash-up is nice...

Thanks

[divvid]

Bizar, ik had met dingen als css scrollbar overflow etc gezocht en alleen maar op 'ouderwetse tabellen' uitgekomen. of veel te ingewikkelde IE6 dingen. Ik wilde het juist zo clean mogelijk houden, jquery kan altijd nog zeg maar. En juist omdat er geen eisen wbt compatibility zijn aan de browser leek me dit een leuke manier om alles in css te doen. Eens iets wat anders dan mijn normale werkzaamheden.

De visualisatie is overigens een D3.js ding, waarvan de data uit een couchdb database gaat komen.