[CSS] divjes met variabele breedte onder elkaar zetten

[pelleke]

Mij is inmiddels vaak genoeg verteld dat het gebruiken van tabellen niet verstandig meer is voor layout-toepassingen. Zodoende ben ik dus op CSS overgestapt, en ben er zeer tevreden over, maar er is toch nog 1 ding wat ik tot nu toe nog niet met 100% CSS voor elkaar gekregen heb (wat bovendien met tabellen vrij simpel is).

Een case:
We maken een tabel met 2 kolommen en 4 rijen. Alle tekst in de tabel is links uitgelijnd. Van de linker kolom staan alle cellen op 'nowrap' (of we gebruiken in dit voorbeeld tekst zonder spaties.)
Nu vullen we alle tabelcellen met dynamische stukjes tekst (met evt. spaties). Je ziet nu dat van alle rijen de rechterkolom kleiner wordt, en alle cellen daar netjes onder elkaar komen te staan.

En zonder tabellen, maar met divjes en CSS is dit een stuk lastiger, omdat je dan deze layout zou moeten hebben

code:

<div class="rij"> // rij 1
  <div class="links"></div>
  <div class="rechts"></div>
</div>
<div class="rij"> // rij 2
  <div class="links"></div>
  <div class="rechts"></div>
</div>

Nu moet CSS-class links een vaste breedte hebben, anders komen de rechts-divjes niet netjes onder elkaar te staan. Dus moeten er eisen worden gesteld aan de lengte van de tekst, en dat kan in mijn geval niet. Je zou op een of andere manier de breedte van het rechter-divje van rij 2 afhankelijk moeten maken van die van het linker-divje van rij 1. (En dat klinkt ineens heel ingewikkeld!)

Wat raden jullie aan? Toch maar een tabel maken? Of is er nog een mooiere oplossing?

[ Voor 8% gewijzigd door pelleke op 16-01-2006 15:25 . Reden: The almighty code-tag vergeten. ]

[BtM909]

Wat voor data wil je eigenlijk presenteren. Ik neem aan dat je niet tabulaire data wilt weergeven met divjes, want daar gebruik je nou net juist een table voor

[Verwijderd]

Jij wilt dus 2 horizontale vakken opdelen in 2 vakken.
Je zou het ook net andersom kunnen doen, 2 verticale vakken verdelen in een boven en onder stuk
dus :

HTML:

<div class="kolom"> 
  <div class="links"></div>// rij 1
<div class="links"></div>// rij 2
</div>
<div class="kolom"> 
    <div class="rechts"></div>// rij 1
  <div class="rechts"></div>// rij 2
</div>

En dan via faux colums kun je er voorzorgen dat de hoogte e.d. goed gaat.

[ Voor 29% gewijzigd door Verwijderd op 16-01-2006 15:37 ]

[pelleke]

Verwijderd schreef op maandag 16 januari 2006 @ 15:36:En dan via faux colums kun je er voorzorgen dat de hoogte e.d. goed gaat.

Volgens mij kan je met faux cols wel de hoogte van de totale kolommen gelijktrekken, maar niet die van de cellen onderling. (sorry voor deze foute termen.)

Wat ik wil layouten is in principe (om het hele verhaal weg te laten) een aantal objecteigenschappen met hun waarden. Ik weet echter niet van tevoren wat de titel is van de langste objecteigenschap, en ik ga er vanuit dat als een divje een bepaalde maximumbreedte heeft, dat de mogelijkheid zich voordoet dat zo'n titel dan te lang is om nog helemaal correct in beeld te komen. Dus wil ik dat de hele linkerkolom in zijn geheel breder wordt zodra dat nodig is, terwijl de rijen wel netjes onder elkaar blijven staan.

Valt dat bij jou onder 'tabular data'

[McVirusS]

pelleke schreef op maandag 16 januari 2006 @ 17:01:
[...]
Valt dat bij jou onder 'tabular data'

Wat mij betreft wel eigenlijk .