float: left; probleem

[BramVroy]

Ok, ik ben site eens aan het updaten (veel dingen stonden in tables etc, nu alles naar lists aan het zetten en algemeen wat veranderingen aan het maken) en ik stootte op volgend probleem:

Ik heb twee ul's onder elkaar, dit was eerst dit: klik. Dat gaat (de achtergrond van de omliggende div 'wordt langer, dus die omliggende div rekt mee uit) maar ik zou de twee lists naast elkaar willen, dus ik gebruik float:left en beiden een width van 360 (omliggende div is 720px) maar dan krijg ik dit: klik. Ik heb geen idee waarom de omliggende div niet mee 'uitrekt' en dus geen achtergrond geeft. Als ik float:left terug weg doe is het allemaal terug in orde..

Iemand een idee?

EDIT: topic title moet dus float zijn..

[cadetmahoney]

Misschien moet je de "height" van de omliggende div veranderen in "min-height". Als de content langer is dan de minimaal ingestelde hoogte rekt 'ie vanzelf mee.

[kaesve]

testcase online zetten en voorbeeldcode posten is altijd handig, maar ik gok dat het gaat werken als je helemaal onderaan de omliggende div een

HTML:

<div style="clear:both;"></div>

neer zet.

[ Voor 4% gewijzigd door kaesve op 26-06-2010 15:49 ]

[geert1]

De oorzaak hiervan zit in hoe floats werken: elementen waarop je float defiinieert, reageren anders dan "normale" elementen op block-niveau. In de praktijk zorgt dat er hier voor dat de omringende div (een gewoon block-niveau element zonder float) niet meerekt met de floated elementen die erin zitten. Om dit op te lossen zul je de floats moeten "clearen" zoals dit heet. Dit kan op verschillende manieren:

1. Enkele jaren geleden was het gebruikelijk om een extra div te plaatsen, na de ul's maar nog binnen de omringende div. Deze nieuwe div geef je dan geen float, maar bijvoorbeeld "clear:both". Een dergelijke clearing div zorgt ervoor dat de omringende div meerekt met zijn kind-elementen, omdat het laatste element nu geen floated element meer is. Dit is wat Kaesve hierboven ook aangeeft.

2. Recent is er een elegantere manier "uitgevonden" om floats te clearen: Men is erachter gekomen dat het instellen van "overflow: hidden" op de omringende div, er ook voor zorgt dat het element meerekt met zijn kind-elementen. Dit heeft dus hetzelfde effect als oplossing 1, maar zonder een extra div.

Beide opties staan hier uitgebreider beschreven. En hier meer over floats en clears. Dit is een erg belangrijk stukje theorie voor als je verder wilt komen met CSS, en wordt door veel mensen slechts deels begrepen.

Succes ermee!

[BramVroy]

Nu heb ik net alles geüpload en dan kom je met een oplossing Nee, was een mopje! Zeer vriendelijk bedankt allemaal, vooral geert1! Hier leer ik tenminste iets van bij, bedankt!

[R4gnax]

geert1 schreef op zaterdag 26 juni 2010 @ 15:50:
De oorzaak hiervan zit in hoe floats werken: elementen waarop je float defiinieert, reageren anders dan "normale" elementen op block-niveau. In de praktijk zorgt dat er hier voor dat de omringende div (een gewoon block-niveau element zonder float) niet meerekt met de floated elementen die erin zitten. Om dit op te lossen zul je de floats moeten "clearen" zoals dit heet. Dit kan op verschillende manieren:

1. Enkele jaren geleden was het gebruikelijk om een extra div te plaatsen, na de ul's maar nog binnen de omringende div. Deze nieuwe div geef je dan geen float, maar bijvoorbeeld "clear:both". Een dergelijke clearing div zorgt ervoor dat de omringende div meerekt met zijn kind-elementen, omdat het laatste element nu geen floated element meer is. Dit is wat Kaesve hierboven ook aangeeft.

2. Recent is er een elegantere manier "uitgevonden" om floats te clearen: Men is erachter gekomen dat het instellen van "overflow: hidden" op de omringende div, er ook voor zorgt dat het element meerekt met zijn kind-elementen. Dit heeft dus hetzelfde effect als oplossing 1, maar zonder een extra div.

Beide opties staan hier uitgebreider beschreven. En hier meer over floats en clears. Dit is een erg belangrijk stukje theorie voor als je verder wilt komen met CSS, en wordt door veel mensen slechts deels begrepen.

Succes ermee!

De tweede heeft alleen als nadeel dat er bijwerkingen aan verbonden zit. Bijwerkingen, daar wordt je niet blij van. (Personen die een project later moeten bijhouden al helemaal niet...)

De beste optie is een moderne variatie op de eerste. Met generated content en de :after pseudo-class kun je het clearing element puur in CSS aanmaken zonder dat er extra zaken in je HTML file gedaan moet worden. (Dit 'element' is later zelfs niet in de DOM-tree terug te vinden.)

Resteert slechts IE6/7, die :after niet ondersteunen. Gelukkig maken die beide browsers een element 'float-containing' zolang het de speciale 'layout' eigenschap van de IE rendering engine krijgt, wat je heel simpel en zonder verdere bijwerkingen voor elkaar kunt krijgen met een kleine 'zoom: 1' trigger. (Tegenwoordig zou dat zelfs moeten valideren, aangezien deze syntax voor zoom in de CSS3 recommendation zit.)

Voorbeeldje:

HTML:

<div class="columns">
 <div class="column">A</div>
 <div class="column">B</div>
</div>

Cascading Stylesheet:

.columns
{
  /* IE6/7 layout trigger. */
  zoom: 1;
}

.columns:after
{
  content: "u00A0"; /*   */

  clear: both; 
  height: 0; 
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}

.column
{
  float: left;
}

[Verwijderd]

R4gnax schreef op zaterdag 26 juni 2010 @ 19:19:
[...]


De tweede heeft alleen als nadeel dat er bijwerkingen aan verbonden zit. Bijwerkingen, daar wordt je niet blij van. (Personen die een project later moeten bijhouden al helemaal niet...)

Zoals? Ik ben hiermee namelijk nog nooit dingen tegengekomen die ik niet verwacht.

[Roytoch]

Verwijderd schreef op zondag 27 juni 2010 @ 11:05:
[...]

Zoals? Ik ben hiermee namelijk nog nooit dingen tegengekomen die ik niet verwacht.

Volgens mij bijvoorbeeld geen padding-bottom op de omringende div kunnen zetten. Op te lossen met juist een margin-bottom op de inliggende divs volgens mij.

[R4gnax]

Verwijderd schreef op zondag 27 juni 2010 @ 11:05:
[...]

Zoals? Ik ben hiermee namelijk nog nooit dingen tegengekomen die ik niet verwacht.

Paged media: probeer floated content die met overflow: hidden gecleared is maar eens te printen. Overflow:hidden wil zeggen dat het resterende deel van je floated content, d.w.z. dat deel wat niet binnen de pagina past waar de floated content op gestart word, niet geprint hoeft te worden. Firefox gooit het bijvoorbeeld gewoon weg. (Toegegeven, daar kun je omheen werken met speciale print style sheets, maar wat wanneer je content moet gaan printen die ook op papier left/right floated ingedeeld moet zijn?)

Ander, meer direct voorbeeld: wat als je nou eens absolute of relative gepositioneerde content in je float hebt zitten die buiten de container uit moet steken? Gaat je niet lukken met overflow: hidden.


Dat zijn slechts twee mogelijke scenarios waar de overflow: hidden techniek rammelt. Vandaar dat het gebruik er van mijns inziens ook funest is in grotere, langer lopende projecten waar in de loop der tijd door meerdere mensen aan gesleuteld moet worden i.v.m. veranderende requirements en pagina layout.

[geert1]

@R4gnax: Zijn wel goede argumenten, ik kom deze nadelen ook af en toe tegen. Als er een absoluut gepositioneerd element uit moet steken, kies ik voor een andere oplossing. Maar dat is in het geval van de topicstarter niet aan de orde.

Het probleem met het printen is zeker legitiem, en erg vervelend. Met een print-stylesheet zou je echter wel de floats kunnen behouden, en alleen de "overflow: hidden"-declaraties uitzetten. Achtergronden worden immers toch niet geprint, dus het zal meestal amper opvallen dat de parent niet met de floats meegroeit in de afgedrukte versie.

Toch is het niet 100% ideaal. De oplossing met ":after" die jij noemt is beter, misschien zou ik hier ook maar es op over moeten stappen. In plaats van "zoom: 1" is het in de meeste gevallen mogelijk om hasLayout te triggeren met "width" (behalve in liquid lay-outs).

[kevinkrs]

Probeer eens

code:

min-height: 100px;
height: auto;

[MoietyMe]

R4gnax schreef op zaterdag 26 juni 2010 @ 19:19:
[...]


De tweede heeft alleen als nadeel dat er bijwerkingen aan verbonden zit. Bijwerkingen, daar wordt je niet blij van. (Personen die een project later moeten bijhouden al helemaal niet...)

De beste optie is een moderne variatie op de eerste. Met generated content en de :after pseudo-class kun je het clearing element puur in CSS aanmaken zonder dat er extra zaken in je HTML file gedaan moet worden. (Dit 'element' is later zelfs niet in de DOM-tree terug te vinden.)

Resteert slechts IE6/7, die :after niet ondersteunen. Gelukkig maken die beide browsers een element 'float-containing' zolang het de speciale 'layout' eigenschap van de IE rendering engine krijgt, wat je heel simpel en zonder verdere bijwerkingen voor elkaar kunt krijgen met een kleine 'zoom: 1' trigger. (Tegenwoordig zou dat zelfs moeten valideren, aangezien deze syntax voor zoom in de CSS3 recommendation zit.)

Voorbeeldje:

HTML:

<div class="columns">
 <div class="column">A</div>
 <div class="column">B</div>
</div>

Cascading Stylesheet:

.columns
{
  /* IE6/7 layout trigger. */
  zoom: 1;
}

.columns:after
{
  content: "u00A0"; /*   */

  clear: both; 
  height: 0; 
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}

.column
{
  float: left;
}

Het probleem is hiermee wel dat er extra ruimte ontstaat achter je element.

Edit/oplossing:

display:block; meegeven aan de :after. Inline elementen kun je natuurlijk niet in hoogte/breedte aanpassen. Dan wordt het dus:

Cascading Stylesheet:

.columns:after {
    content:"u00A0";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

Getest in Safari 5, Firefox 3.6, IE8 en Opera 10.54.

[ Voor 9% gewijzigd door MoietyMe op 30-06-2010 09:41 ]

[R4gnax]

Good Fella schreef op woensdag 30 juni 2010 @ 09:27:
[...]

Edit/oplossing:

display:block; meegeven aan de :after. Inline elementen kun je natuurlijk niet in hoogte/breedte aanpassen.

Klopt. De display:block declaratie was ik inderdaad in alle vlugte vergeten. Ironisch genoeg een gevalletje waar copy&paste eens geen fouten had gegeven.

[MoietyMe]

R4gnax schreef op woensdag 30 juni 2010 @ 20:56:
[...]


Klopt. De display:block declaratie was ik inderdaad in alle vlugte vergeten. Ironisch genoeg een gevalletje waar copy&paste eens geen fouten had gegeven.

Wil je wel bedanken voor de tip. Heb vanmiddag iedereen op mijn afdeling dit uitgelegd en gezegd dat we vanaf nu dit gaan gebruiken Wel eerst goed getest natuurlijk.

[crisp]

Zelf geef ik toch altijd de voorkeur aan een overflow:hidden, en als dat niet kan een <div class="clear"></div>; op de een of andere manier voelt de generated-content truuk mij te gekunstelt aan, dan liever een markup-oplossing die in ieder geval aan duidelijkheid niets te raden over laat.

[geert1]

crisp schreef op woensdag 30 juni 2010 @ 23:01:
Zelf geef ik toch altijd de voorkeur aan een overflow:hidden, en als dat niet kan een <div class="clear"></div>; op de een of andere manier voelt de generated-content truuk mij te gekunstelt aan, dan liever een markup-oplossing die in ieder geval aan duidelijkheid niets te raden over laat.

Bij mij zit het ook niet helemaal lekker om met css een element te "creëren" op deze manier, het voelt inderdaad aan als een hack. Maar het werkt goed, en het heeft eigenlijk geen nadelen. In mijn geval heeft de wrapper vaak toch al hasLayout, waardoor het toch wel een leuke methode is. Ik blijf 'em toch maar gebruiken denk ik.

[ Voor 3% gewijzigd door geert1 op 02-07-2010 13:06 ]

[MoietyMe]

crisp schreef op woensdag 30 juni 2010 @ 23:01:
Zelf geef ik toch altijd de voorkeur aan een overflow:hidden, en als dat niet kan een <div class="clear"></div>; op de een of andere manier voelt de generated-content truuk mij te gekunstelt aan, dan liever een markup-oplossing die in ieder geval aan duidelijkheid niets te raden over laat.

Dan zet ik die class clear liever op het element wat om de float heen zit en zet ik de generated content op die class. Ik vind het mooi werken. Ja het is wat meer regels code, maar heeft als voordeel dat het (bijna) geen nadelen heeft.