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

Øøøøøøø det er et lidt spinkelt spørgsmål i #1.

Hvis du laver en wrapper

 <div style="height: 100%; width: 100%;" class="siteWrapper">
 
 </div>

Og kommer et element ind i den, lad os sige et billed.

 <div style="height: 100%; width: 100%;" class="siteWrapper">
 <img src="noget" alt="error"/>
 </div>

Lad os så sige dit billed er 100px højt og 200px bredt.
Og du gerne ville indsætte et billed mere med samme højde og bredde.
Så siger du

 <div style="height: 100%; width: 100%;" class="siteWrapper">
 <img style="float: left;" src="noget" alt="error"/>
 <img style="margin:left 201px;" src="noget2" alt="error"/>
 </div>

Og det burde der ikke være problemer i.

Problemer opstår som tidligere sagt at de fleste ikke ved at et floated element ikke indgår i det generalle design for de andre elementer. Og derfor skal man tage det med i sine overvejelser.

Hvis du så har et floated element, som overlapper et andet element. F.eks. En footer. Så går du ned i footeren og siger

 clear: left; /*eller*/
 clear: right;

Afhængigt af om det element der er floated ovenover er left eller right.

@cristian

øhhh, det afhænger vist af øjnene, som ser !

Jeg mener: der er to andre, som svarede ret præcist, synes jeg, på mit spørgsmål ! - men det skal absolut ikke skilles os ad, jeg er bestemt glad for at du også lige giver dit indspark også.

Omkring din CSS, så vil jeg da foretrække at bruge clear: both; - da den jo rammer det hele, men må erkende, at din måde jo er mere præcis, da den kun rammer det den skal og dermed tør jeg næsten at driste mig til at sige, din CSS er mere korrekt at bruge, mens clear: both; i nogen tilfælde er CSS: redneck-style yyeeehhaaaa !

@henrik

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.

Du må tro hvad du vil og danne de indtryk du kan. Min oplevelse er markant anderledes. Og får du en anbefaling om at bruge float som generel design regel, fra en fagligt dygtig lærer, og den "plejer at spille", så forstår jeg ikke baggrunden for dit indledende spørgsmål. ;o)

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

Det virker altser lidt mystisk... Og at det lige ikke altid spiller kan jeg godt forestille mig.

Omkring din CSS, så vil jeg da foretrække at bruge clear: both; - da den jo rammer det hele, men må erkende, at din måde jo er mere præcis, da den kun rammer det den skal og dermed tør jeg næsten at driste mig til at sige, din CSS er mere korrekt at bruge, mens clear: both; i nogen tilfælde er CSS: redneck-style yyeeehhaaaa !

Ja du siger det jo selv

Sjovt nok har jeg det lige omvendt. Jeg syntes cristians løsning er helt i hegnet.

@Dan
Kan du uddybe din konstruktive kritik?

@cristian - Dit eksempel er fuld af unødvendig css og løser ikke problemet.

clear: both / left / right. Virker fint for efterfølgende elementer men selve wrapperen vil stadig kollapse så man f.eks. Ikke kan sætte en baggrundsfarve på den.

Jeg har opsat eksemplerne her så de kan ses: http://jsfiddle.net/2jg8D/2/

1) Er dit eksempel med dit CSS
2) Er dit eksempel uden CSS overhovedet
3) Er to images der floater i en wrapper
4) Er to images der floater i en wrapper med clear:both;
5) Er to images der floater i en wrapper med clearfix

@cristian - Dit eksempel er fuld af unødvendig css og løser ikke problemet.

clear: both / left / right. Virker fint for efterfølgende elementer men selve wrapperen vil stadig kollapse så man f.eks. Ikke kan sætte en baggrundsfarve på den.

Jeg har opsat eksemplerne her så de kan ses: http://jsfiddle.net/2jg8D/2/

1) Er dit eksempel med dit CSS
2) Er dit eksempel uden CSS overhovedet
3) Er to images der floater i en wrapper
4) Er to images der floater i en wrapper med clear:both;
5) Er to images der floater i en wrapper med clearfix

Så jeg kikkede det du lavede igennem. Og for det du konstaterer og det du viser kan det ikke rigtig bruges til noget. Du burde kunne have sagt dig selv at du skulle udskifte dine inline elementer med block elementer, da jeg blot viste teori og sagde

f.eks. Et billed.

Så alt fra
2) Er dit eksempel uden CSS overhovedet
3) Er to images der floater i en wrapper
4) Er to images der floater i en wrapper med clear:both;
5) Er to images der floater i en wrapper med clearfix
burde du lave om for at kunne demonstrer det du ville. Og så er jfiddle heller ikke bedre.

Men det gjorde jeg for dig, prøv at kikke med engang inden du angriber.
http://jsfiddle.net/6cJBC/

Hvor det eneste jeg gjorde var at udskifte inline med block elementer.
Så din løsning hvor meget du end gerne ville virker ikke og det gør min som vist i eksempel nummer to.

Og den måde du prøver at bruge clear på, virker slet ikke sådan i praksis.

The clear property specifies which sides of an element where other floating elements are not allowed.

Hvis] det floatet element overlapper et andet element.

Tillykke @cristian ... du har helt misforstået eksemplet.

Tillykke @cristian ... du har helt misforstået eksemplet.

Ved ikke rigtig hvad jeg skal sige til dig.

Først brøler du over
1) Er dit eksempel med dit CSS
2) Er dit eksempel uden CSS overhovedet

Og så skyder du skylden på at eksemplet ikke forstås.

For så i
5) Er to images (som stadig skulle være blok elementer but hey fuck it) der floater i en wrapper med clearfix

Hvor du laver du alt muligt fiks faks i stedet for bare at lave det ordenligt uden alt muligt ekstra kode, fordi du kan. Man kan sikkert også spise sin mad med en steak-kniv, men det sku heller ikke helt rigtigt. Og det sku også lidt underligt at gøre.

Hvor det du laver på 11 linjer med 2 klasser og 2 pseudo klasser. laver jeg på 6 linjer med 1 klasse udfra dit eget eksempel. Og så det nok stadig tvivlsomt, men det gider jeg ikke tænke på.

Men god fornøjelse med din CSS. Du jo Web Developer for fanden som din signatur siger. Selvom at 50% af din CSS ikke er aktiv det bare fyld.

Forlader denne diskussion inden den nedgradere mere end hvad den er blevet i forvejen.