margin 0 auto og float - hvordan gøres det rigtigt ?

Jeg bruger en clearfix class. Som jeg sætter på wrapperen

Som Dan siger, du kan enten finde en clearfix (google det), eller også indsætte en class lige efter dine float elementer.

 .clear {
 clear: both;
 }

 <div class="wrapper">
     <div class="float-left">.float-left</div>
     <div class="float-right">. float-right</div>
 
     <div class="clear"></div>
 </div>

Hej

Tak for jeres svar.

@Anders

Jeg valgte at gøre brug af dit forslag, efter at have læst nogle sider omkring clearfix, da den var en no-brainer og viste sig at virke i mit tilfælde.

Jeg kan også se på søgeresultaterne på Google, at jeg så langt fra er den eneste, som har lidt problemer med float'ede elementer som "hopper" ud af de kasser de bliver sat ind i.

Endnu engang tak for jeres svar

Det er kun et problem, fordi folk ikke er klar over det er den naturlige opførsel for floatede elementer og deres wrapper / parent / omkring liggende element.

Det er kun et problem, fordi folk ikke er klar over det er den naturlige opførsel for floatede elementer og deres wrapper / parent / omkring liggende element.

Well, hvis det er "den naturlige opførsel", og den virker så samtidig virker som en "unaturlig opførsel" for så mange mennesker, så burde det da laves om synes jeg.

Det kan jo ikke passe at man skal benytte sig af diverse hacks eller bruge clear: both; for at få float'ede elementer til at makke ret.

Men nå, alt dette her CSS-halløj er jo lavet af mennesker, som er en hel del klogere end jeg nogensinde kan drømme om at blive, så der er jo nok en mening med galskaben !

Dybest set tror jeg meningen er, at man ikke skal bruge floats til placering af elementer på den måde. Ikke fordi du gør noget forkert. Der er bare ikke nogle bedre redskaber ... Endnu.

Det skal siges, at der med CSS3 er kommet flexbox og grid layout. Men det et ikke helt på plads hvordan det skal opbygges samt det heller ikke er understøttet af alle browsere endnu.

Dybest set tror jeg meningen er, at man ikke skal bruge floats til placering af elementer på den måde. Ikke fordi du gør noget forkert. Der er bare ikke nogle bedre redskaber ... Endnu.

Det skal siges, at der med CSS3 er kommet flexbox og grid layout. Men det et ikke helt på plads hvordan det skal opbygges samt det heller ikke er understøttet af alle browsere endnu.

Det kan du have ret i - hvis der var en bedre måde (mindre problemfyldt), så havde mine lærer nok sagt det tror jeg, men jeg og mine medstuderende har lært, at vi, som udgangspunkt skal float'e alt indhold til venstre, så er det vi gør ! og det virker som hovedregel også ganske udmærket, men (sikkert grundet mangelfuld, grænsende til det ikke-eksisterende, teoriundervisning) så kommer vi ud ind i mellem ud for, at tingene ikke lige spiller.

Det er da et sindssygt udgangspunkt.

Float skal kun bruges når det er nødvendigt, ikke som en generel regel. Så lad endelig være med det, det giver kun problemer når du skal tilpasse på et senere tidspunkt.

Det lyder som en knaldhætte lærer fra CMOK.

* { float: left; }

* { float: left; }

Ja, det var jo den super nemme løsning

@Michael Larsen

Det er da et sindssygt udgangspunkt.

Float skal kun bruges når det er nødvendigt, ikke som en generel regel. Så lad endelig være med det, det giver kun problemer når du skal tilpasse på et senere tidspunkt.

Det lyder som en knaldhætte lærer fra CMOK.

Well, det er jo det du skriver, men jeg kan bare konstaterer, at det hele plejer at spille, så helt sindssygt kan det jo ikke være...

Vedr. mine lærer, så tror jeg nok de har styr på det, de skal have styr på rent fagligt - jeg er i hvert fald blevet positivt overrasket, men jeg er ikke kvalificeret til at kunne vurdere deres faglighed, men det er dog mit indtryk at de er dygtige.