Negative Margins

[andrej]

Interesuje me na koji nacin, u ovom textu, radi sledeci code:

#container {
  width: 100%;
  float: left;
  margin-right: -200px;
}

Kao i ovo gde on kaze:

It is very important that we float this element, as margins (and thus, negative margins) are handled differently for floated and inline elements than they are for non-floated block-level elements.

Na koji nacin se konkretno razlikuju margine kod float i non-float elemenata?

[bluesman]

To je samo zato da bi mogao da se "zguzne" onaj desni sidebar. Kada bi ostavio samo width:100%; desni sidebar bi se izvukao ispod, jer je u kodu prvo content pa onda sidebar.

Ovo se radi da bi #container dosao u kodu ispred sidebar, konvencionalnim tehnikama, ako se stavi da sidebar bude float:right, onda bi on morao da ide ispred containera. Ovako moze slobodno i iza, odnosno da prvo ide container, sto je bolje za SEO i gomilu slicnihi "gluposti". Mada, ovo sve je moglo i drugacije da se odradi... kao i sve u ovom poslu - moze na vise nacina.

[andrej]

Da, shvatio sam problematiku, medjutim pitanje je bilo vise tehnicke prirode oko css-a.

Po meni, logicno bi bilo da je stavio margin-right: 200px, kako bi omakao od desne strane i napravio prostor, a ne -200px. Ali to ne radi, pa se pitam zasto?

//ovo drugo sam sam skapirao...

[ivanhoe]

Originalno napisao andrej

Da, shvatio sam problematiku, medjutim pitanje je bilo vise tehnicke prirode oko css-a.

Po meni, logicno bi bilo da je stavio margin-right: 200px, kako bi omakao od desne strane i napravio prostor, a ne -200px. Ali to ne radi, pa se pitam zasto?

//ovo drugo sam sam skapirao...

Zato sto je stavio width:100%, odnosno taj floated element zauzima punu sirinu ekrana. Seti se da po W3C box modelu margine se dodaju na sirinu, odnosno kad bi ti stavio tih +200px margine, onda bi ti kontejner zauzimao 100% + 200px, a ti zelis suprotno, ti zelis da oslobodis prostor za desne strane. Znaci treba da oduzmes 200px sa desne strane, tj. ispada da ti je right-margin:-200px, a bounding box elementa nam je onda 100%-200px.
QED