[CSS] Floats in een container breder dan de viewport

[posttoast]

Ik ben bezig met het opzetje van een site, maar ik loop tegen een probleem aan waarvoor ik geen oplossing kan vinden. Ik heb een container die een minimale breedte van 100% heeft waarin div's moeten komen te staan die links tegen elkaar floaten. De bedoeling is dat als alle div's bij elkaar breder zijn dan die 100% er horizontaal gescrolld moet worden.

Dit gaat echter niet goed: zodra er teveel div's naast elkaar staan komen ze in een rij eronder te staan. Dit is waarschijnlijk het resultaat van de manier waarop floats werken, maar ik vroeg me af of er geen manier is om dit te omzeilen. Het enige dat ik me kan bedenken is de breedte met javascript berekenen en die vervolgens op de container toepassen. Dat vind ik alleen een nogal ranzige oplossing.

Het probleem is hier te aanschouwen: http://www.posttoast.nl/got/floatprobleem/voorbeeld1.html

Dit is een mockup van wat ik wil bereiken:


De CSS waar het om gaat:

Cascading Stylesheet:

#content-framework{
  height: 300px;
  width: 100%;
  overflow-x: auto;
}

#content-framework .itemblock{
  float: left;
}

De HTML:

HTML:

<div id="content-framework">
  <div class="itemblock">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis leo, blandit vel, mollis mattis, venenatis eget, enim.
    </p>
  </div>
  <div class="itemblock">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis leo, blandit vel, mollis mattis, venenatis eget, enim.
    </p>
  </div>
  <div class="itemblock">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis leo, blandit vel, mollis mattis, venenatis eget, enim.
    </p>
  </div>
  <div class="itemblock">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis leo, blandit vel, mollis mattis, venenatis eget, enim.
    </p>
  </div>
  <div class="itemblock">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis leo, blandit vel, mollis mattis, venenatis eget, enim.
    </p>
  </div>
  <div class="itemblock">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed felis leo, blandit vel, mollis mattis, venenatis eget, enim.
    </p>
  </div>
</div>

[ Voor 4% gewijzigd door posttoast op 22-09-2008 17:48 . Reden: mockup toegevoegd ]

[moozzuzz]

In je CSS staat dat je de items in een framework zitten van exact 100% de breedte (van het vorige element, wellicht body). Daarom zet de pagina zich in 2 rijen.

Kan min-width je niet helpen?

[posttoast]

Het is de bedoeling dat het framework niet breder wordt dan de viewport, daarom heeft deze een overflow-x: auto. Alleen die div moet dus een scrollbar krijgen, niet de hele body. min-width gaat hier dus niet helpen, of ik moet je verkeerd begrijpen.

Edit: ik heb voor de duidelijkheid even een mockup gemaakt in Photoshop en aan de startpost toegevoegd.

[ Voor 17% gewijzigd door posttoast op 22-09-2008 17:49 ]

[tonyisgaaf]

posttoast schreef op maandag 22 september 2008 @ 16:49:
[...] Het enige dat ik me kan bedenken is de breedte met javascript berekenen en die vervolgens op de container toepassen. Dat vind ik alleen een nogal ranzige oplossing.
[...]

Dat is wel de enige werkbare manier wanneer je geen tables oid wilt gebruiken. De conventie is nu eenmaal dat er van boven naar beneden wordt gescrolled, dat is volgens mij ook de reden waarom het technisch zo moeilijk is om een div als "horizontal scrolling frame" te gebruiken.
Overigens, stél dat het ipv. div's, images waren geweest, dán was je met "whitespace: nowrap;" op de container nog een eind gekomen. Stel dan hè...

Ik zou inderdaad om de "links gefloate divs" nog een container zetten en daarvan de breedte m.b.v. JS toepassen. Indien je een serverside script gebruikt kun je er natuurlijk ook een inline-style aan toevoegen. Wanneer je het gebruiksvriendelijk wilt houden stel je de vaste hoogte (of de overflow) van de "horizontaal scrollende div" ook in met JS, zodat mensen die JS hebben uitstaan ook nog iets zien.

Hier een schaamteloos voorbeeld zoals ik dat een keer heb gemaakt.

[ Voor 5% gewijzigd door tonyisgaaf op 23-09-2008 01:10 . Reden: voorbeeld d'rbij ]

[posttoast]

Tja, dan wordt het toch maar javascript inderdaad... Het is niet anders. Met afbeeldingen kun je inderdaad gewoon een nowrap gebruiken, maar dat komt natuurlijk omdat dat standaard inline elementen zijn en geen blocklevel.

Bedankt voor je voorbeeld in ieder geval!

[Bosmonster]

ipv float:left kun je misschien display:inline-block gebruiken?

[posttoast]

Dat heeft precies hetzelfde effect als een float:left helaas.

[Bosmonster]

posttoast schreef op dinsdag 23 september 2008 @ 10:02:
Dat heeft precies hetzelfde effect als een float:left helaas.

Ow, net zei je nog dat het met images wel werkt, en die zijn gewoon display:inline-block.

[posttoast]

Bosmonster schreef op dinsdag 23 september 2008 @ 10:43:
[...]


Ow, net zei je nog dat het met images wel werkt, en die zijn gewoon display:inline-block.

Sorry, ik dacht dat die normaal inline waren (en daarmee heb ik het ook getest, door ze hard op display: inline te zetten, omdat alle andere images op display: block had staan).

[tonyisgaaf]

Bosmonster schreef op dinsdag 23 september 2008 @ 09:30:
ipv float:left kun je misschien display:inline-block gebruiken?

Je hebt inderdaad gelijk, dit werkt ook. Althans, in Safari en FF, niet in IE6 (heb geen IE7 om te testen)

[posttoast]

Misschien doe ik iets verkeerd hoor, maar inline-block doet hier hetzelfde als een float left.

Overigens is verticaal scrollen inderdaad meer gebruikelijk, maar er zijn ook genoeg situaties te bedenken waarbij dit niet zo is. Als er een deugdelijk interactieontwerp is zie ik hier geen problemen in. Ik kan me dus ook niet voorstellen dat het om die reden technisch lastiger is, volgens mij is het gewoon een resultaat van de manier waarop floats werken.

[tonyisgaaf]

Testcase van display: inline-block; icm white-space: nowrap;

Werkt bij mij in Safari 3.1.2, FF 3.0.1 en Opera 9.52 op de Mac, maar niet in IE6 (in Wine op de Mac), die doet net als float.

[posttoast]

Verdraaid, het werkt inderdaad! Geen idee wat ik eerder verkeerd deed.

Dit brengt alleen wel een ander probleem aan het licht: als ik een backgroundimage in de parent zet dan stretcht deze niet mee bij het scrollen...