{"id":108,"date":"2007-04-18T16:43:16","date_gmt":"2007-04-18T15:43:16","guid":{"rendered":"http:\/\/eriz.pc-inside.org\/weblog\/dwukolumnowy-proporcjonalno-staly-layout-bez-problemow-108.html"},"modified":"2007-04-23T14:57:52","modified_gmt":"2007-04-23T13:57:52","slug":"dwukolumnowy-proporcjonalno-staly-layout-bez-problemow","status":"publish","type":"post","link":"https:\/\/eriz.pcinside.pl\/weblog\/dwukolumnowy-proporcjonalno-staly-layout-bez-problemow-108.html","title":{"rendered":"Dwukolumnowy proporcjonalno-sta\u0142y layout bez problem\u00f3w"},"content":{"rendered":"

Gdyby nie to, \u017ce IE<=6 potrafi p\u0142ata\u0107 przer\u00f3\u017cne figle, to webmasterzy mieliby dos\u0142ownie sielankowe \u017cycie. \":)\" A tak, trzeba si\u0119 m\u0119czy\u0107 (mo\u017ce to celowe dzia\u0142anie Stw\u00f3rcy, aby zarobki nie pospada\u0142y? :D). Za\u0142\u00f3\u017cmy, \u017ce IE w pe\u0142ni obs\u0142uguje (no co? Pomarzy\u0107 nie mo\u017cna?! ;P) wszelkie standardy, zachowuje si\u0119 tak, jak inne przegl\u0105darki. O ile w przypadku IE7 nie jest ju\u017c tak \u017ale, to IE6 dzia\u0142a tak, \u017ce tylko lokalni szamani s\u0105 w stanie przewidzie\u0107, jak zostanie zinterpretowana konkretna strona…<\/p>\n

Za\u0142\u00f3\u017cmy, \u017ce IE6 obs\u0142uguje wszystko jak trzeba. Wtedy wystarczy\u0142by np. display: table-cell<\/em> i wszyscy byliby zadowoleni. Wracamy na Ziemi\u0119 i ko\u0144czy si\u0119 sielanka… Co mo\u017cna zrobi\u0107?<\/p>\n

<\/p>\n

Bardzo cz\u0119sto musz\u0119 stworzy\u0107 jaki\u015b layout okre\u015blony mniej-wi\u0119cej w ten spos\u00f3b: dwie kolumny, z czego pierwsza ma okre\u015blon\u0105 szeroko\u015b\u0107 np. 150 pikseli, a druga dopasowywuje si\u0119 do rodzica (za\u0142\u00f3\u017cmy, \u017ce do ca\u0142ej szeroko\u015bci przegl\u0105darki).<\/p>\n

\"Uk\u0142ad<\/p>\n

W dalszej cz\u0119\u015bci b\u0119dziemy bazowa\u0107 na tym kr\u00f3tkim kawa\u0142ku kodu.<\/p>\n

<\/p>\n

\n
abc def ghi jkl mno pqr stu vwx yz<\/div>\n
Lorem ipsum...<\/div>\n<\/div>\n

<\/code><\/p>\n

W tej „wersji” zak\u0142adam, \u017ce warstwa tresc<\/em> zawiera wi\u0119cej tekstu ni\u017c lewa<\/em> (dlaczego? chodzi o to, aby warstwa z tre\u015bci\u0105 by\u0142a wy\u017csza od lewej<\/em>, poniewa\u017c t\u0142o tre\u015bci<\/em> bez tekstu nie b\u0119dzie si\u0119 zwi\u0119ksza\u0107 do po\u017c\u0105danej wysoko\u015bci).<\/p>\n

Najprostsze rozwi\u0105zania s\u0105 zazwyczaj najlepsze i zazwyczaj (praktycznie zawsze) wystarcza:<\/p>\n

#rodzic
\n{ width: 100%; overflow: hidden }<\/p>\n

\t#lewa
\n\t{ width: 150px; margin-right: -151px; }<\/p>\n

\t#content
\n\t{ margin-left: 150px; }<\/code><\/p>\n

Po co ten ujemny margines w lewej kolumnie? Ano, dla IE6… Mo\u017cna by\u0142o go wcisn\u0105\u0107 w komentarzu warunkowym i serwowa\u0107 tylko dla IE, ale – co ciekawe – nie wp\u0142ywa na wygl\u0105d w innych przegl\u0105darkach… Nierzadko si\u0119 zdarza, \u017ce to jedyny hack, kt\u00f3rego trzeba u\u017cy\u0107, a skoro dzia\u0142a u innych i nie zajmuje wiele miejsca (mniej ni\u017c ca\u0142y komentarz warunkowy) – mo\u017cna spokojnie go zostawi\u0107 w g\u0142\u00f3wnym arkuszu (oczywi\u015bcie, w przypadku wi\u0119kszej liczby takich podchod\u00f3w nawet nie ma co si\u0119 zastanawia\u0107 – w komentarz). Jaka panuje zasada w wyliczaniu marginesu? Ot\u00f3\u017c, jego szeroko\u015b\u0107 musi by\u0107 co najmniej o jeden piksel wi\u0119ksza ni\u017c sumaryczna warstwy (czyli padding+margin+width; tak jest najbezpieczniej). Kombinowanie z tym marginesem jest potrzebne, poniewa\u017c bez niego w warstwie zawartosc<\/em> wszystko do wysoko\u015bci lewej kolumny przesuni\u0119te jest o jeden piksel. I niewa\u017cne, jak du\u017cy si\u0119 ustawi margines w tresc<\/em> – b\u0119dzie przesuni\u0119te o ten piksel:<\/p>\n

\"Bug<\/p>\n

Gdy dodamy margines – wszystko dzia\u0142a. \":)\" Sprawdza si\u0119 tak, jak to sobie zaplanowali\u015bmy wcze\u015bniej.<\/p>\n

\"Uk\u0142ad<\/p>\n

Kolorowanie<\/h3>\n

Przy display: table[-cell] (itp.)<\/em>, t\u0142o mo\u017cna bezpo\u015brednio ustawi\u0107 w stylach dla lewa<\/em>, ale jest pewien problem – IE6… Co zrobi\u0107? Trzeba ustawi\u0107 t\u0142o dla rodzica i odpowiednio je przesun\u0105\u0107 tak, aby dotyczy\u0142o tylko lewej warstwy. Mo\u017cna to zrobi\u0107 w dwojaki spos\u00f3b:<\/p>\n