[HTML/CSS] Divs wrappen bij overflow naar newline

[Harrie_]

Ik heb een CSS-probleem waar ik maar niet uitkomt; ik heb al van alles geprobeerd maar begin langzamerhand te denken dat ik wellicht de oplossing in de verkeerde elementen aan het zoeken ben.
Eerst maar even de relevante code:

HTML:

<div class="datatable-container">
    <table class="datatable">
        <tr class="left">
            <th>
                <div class="datatable-th">
                    <div class="dt-title">
                        <p>TableHeader</p>
                    </div>
                    <div class="dt-option">
                        <div class="dt-sort-desc-active"></div>
                    </div>
                    <div class="dt-option">
                        <div class="dt-filter-inactive"></div>
                    </div>
                </div>
            </th>
            <th>
                [etc.]

Cascading Stylesheet:

.datatable-container {
    display: block;
    overflow-x: auto;
}

div.datatable-th {
    white-space:nowrap;
    display: block;
    width: 100%;
    vertical-align: top;
}

.datatable div.dt-title {
    display: inline-block;
    float: left;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}

.datatable div.dt-option {
    display: inline-block;
    float: right;
    height: 24px;
    width: 24px;
    margin-left: 5px;
    vertical-align: top;
}

Qua CSS heb ik alles wat met color, border, margin en padding te maken heeft weggelaten.

Het probleem
Zoals misschien duidelijk uit de code wil ik in al mijn headers 3 elementen plaatsen. Deze elementen zitten gewrapped in een div met width 100% waardoor alle 3 de elementen naast elkaar in de header komen. De titel links (float: left) en 2 divs met achtergrondafbeelding rechts (float: right). So far so good! De hele tabel zit gewrapped in een div met overflow-x: auto. De bedoeling is dat, wanneer de tabel te groot wordt, er een scrollbalk komt. De scrollbalk komt er inderdaad, maar op dat moment worden ook de 2 right-floatende divs onder de left-floatende div geplaatst.

Ik ben al uren mijn elementen aan het aanpassen, van display: block naar inline-block naar flex maar ik kom er niet meer uit. Even dacht ik het probleem opgelost te hebben door op mijn wrappende div in de header width:max-content in te stellen maar dit geeft alleen goed resultaat in Chrome

[BarôZZa]

Makkelijkste en netste manier: knikker de floats eruit en gebruik display: flex voor .datatable-th

Andere optie is position:relative en padding-right: **px op .datatable-th te zetten en de twee divs aan de rechterkant position:absolute te doen met een right: **px

[EJlol]

Flexbox lijkt mij inderdaad de makkelijkste en mooiste oplossing.

[Harrie_]

@BarôZZa @EJlol

Bedankt voor de antwoorden. Wanneer ik .datatable-th op flex zet is het probleem van de newline inderdaad opgelost, maar ik krijg dan de .dt-option met geen mogelijkheid rechts uitgelijnd.

Andere optie is position:relative en padding-right: **px op .datatable-th te zetten en de twee divs aan de rechterkant position:absolute te doen met een right: **px

Dit kan ik niet helemaal volgen. Wanneer ik position:absolute op .dt-option zet worden deze divs allemaal boven elkaar gezet helemaal rechts in de tr (dus niet in de td/th)

[EJlol]

Lees ook even de 'A complete Guide to Flexbox' door. En dan met name het stukje over 'flex-grow'. Hiermee kan je bepaalde elementen laten groeien, totdat het niet meer past. Anders gezegd, alle elementen die erna komen worden naar rechts gedrukt, om het groeiende element zoveel mogelijk ruimte te bieden. Hopelijk kom je er met deze uitleg eruit .

[BarôZZa]

Harrie_ schreef op vrijdag 17 november 2017 @ 11:44:
@BarôZZa @EJlol

Bedankt voor de antwoorden. Wanneer ik .datatable-th op flex zet is het probleem van de newline inderdaad opgelost, maar ik krijg dan de .dt-option met geen mogelijkheid rechts uitgelijnd.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dit kan ik niet helemaal volgen. Wanneer ik position:absolute op .dt-option zet worden deze divs allemaal boven elkaar gezet helemaal rechts in de tr (dus niet in de td/th)

Dan moet je de parent position relative geven en de top/right instellen van de .dt-options

[Verwijderd]

Wat gebeurt er als je de th's white-space: nowrap; meegeeft?

[Harrie_]

@Verwijderd: die hebben al nowrap
@EJlol @BarôZZa: bedankt voor het sturen in de juiste richting m.b.t. flex

flex-grow was uiteindelijk de oplossing en er kan er maar een het 'beste antwoord' hebben dus dat gaat bij deze naar EJlol. Iedereen bedankt voor het meedenken en ik zal me van de week eens goed gaan verdiepen in CSS3. Ik merk dat ik daar niet genoeg van op de hoogte ben terwijl het meeste gewoon ondersteund wordt door alle moderne browsers.

[BarôZZa]

Ik zou eigenlijk protest moeten indienen vanwege de toewijzing van het beste antwoord

Maar goed dat het gelukt is.

[Harrie_]

BarôZZa schreef op vrijdag 17 november 2017 @ 14:57:
Ik zou eigenlijk protest moeten indienen vanwege de toewijzing van het beste antwoord

Maar goed dat het gelukt is.

Vooruit, dan krijg je een paar

[Verwijderd]

Harrie_ schreef op vrijdag 17 november 2017 @ 14:53:
@Verwijderd: die hebben al nowrap

Niet goed gekeken - sorry...