Mimicry Diario

I miei esordi con i CSS

Forse qualcuno di voi vorrebbe conoscere i miei esordi con i CSS. Pescando negli hard disk della memoria, ho trovato questo vecchio post datato 23 agosto 2005 postato su Webmaster World:

Gabriele: Here's my code:

body { 
margin: 0; 
padding: 0; 
background: #983607; 
font: 12px Tahoma, Verdana, Arial, Geneva, 
Helvetica, sans-serif; 
text-align: center; 
} 

#container { 
margin: 10px auto; 
padding: 0; 
background: #f8f8ee; 
width: 800px; 
text-align: left; 
} 
#container #banner {
margin: 0; 
padding: 5px 0px 5px 2px; 
height: 80px; 
background: #ebebeb; 
text-align: center; 
} 
#container #float { 
margin: 0; 
padding-left: 5px; 
width: 200px; 
background: inherit; 
float: right; 
} 
#container #content { 
margin: 0px 210px 0px 0px; 
padding: 0px; 
width: 600px; 
} 

I don't understand why if I follow the order of CSS (first float, then content) I find several problems specially with IE. Can you help me to fix this flaky CSS? Thanx you all! :)

The section "content" appears below. why?

L'inglese è da dimenticare, ma il problema è chiaro: lo slittamento del contenuto principale sotto il float. Uno dei moderatori, createErrorMsg, con molta gentilezza e competenza mi diede questa risposta:

createErrorMsg: There is a major bug in the IE float model that is triggered when you provide a dimension (width or height) for a non-floated element that sits adjacent to a float. In this case, you've provided a 600px width on the #content div. Since the #float div floats next to this div, the wonky IE float model is triggered. In the regular, compliant float model, a floated object literally sits on top of adjacent non-floated elements.

Although line boxes containing text within that element are not allowed to be covered up by the float, and therefore wrap around it, the actual block level element next to which the float is floating extends underneath it. To put it another way, the top left corner of #float and the top left corner of #content are actually in the same spot. In this scenario (compliant float model), your 600px width and 200px margin work fine to place those elements into an 800px wide box. The non-floated element's 200px margin sits underneath the float, with the remaining explicit width of 600px sticking out from under it.

The funky IE float model, however, does things differently. Instead of starting the widthed, non-floated element's left edge even with the floats left edge, it starts that edge at the right hand border of the float. The float doesn't actually sit on top of the non-floated element, but shoves the whole block level div over to the side, which means your layout shows first the 200px wide float, then the 200px of margin, THEN the 600px of width. Since an 800px wide container isn't wide enough to display this 1000px wide layout, it wraps down to the next line. The solution is to simply not specify a width on that float adjacent #content div. Without an explicit width, IE will continue to use the compliant float model.

Furthermore, the compliant float model doesn't require the width. Without an explicit width the value is auto, which means the browser takes borders, padding and margins, then assigns all the rest of the room in the 800px wide container as the width for the #content div...which is exactly what you were explicitly doing with your width.

cEM

In pratica l'errore, in Internet Explorer, era di aver dichiarato una larghezza esplicita per il contenuto. Anche il margine di 210px era da evitare per non incorrere in problemi. Ma quelli erano i miei primi tentativi con i CSS, ed io non sapevo molto a proposito di queste problematiche.

Per concludere questo breve flashback, inserisco di seguito una mia foto scattata l'8 maggio 2005. Masochismo? Ai posteri l'ardua sentenza.