Верстка. 3 колонки. Div. Говорится–ну че парится?

Сижу значит, разбираю макет, точнее стиль верстки под 3 колонки, расставляю все точки над ё. Набиваю скил, осваиваю негативные отступы. Думаю, ну все вообще умный, гуру отечественной верстки.. Разбираю CSS – вникаю во все тонкости и нюансы.. И еще много красивых эпитетов в этот счет

Но Истина то совсем рядом, а ведь не поленился и нашел! Кому интересно, чем все закончилось – прошу читать далее, а нет, скрольте дальше, может снизу ты найдешь для себя что-поинтересней, фотошоп и все плюшки.. А здесь у нас Спарта, то есть Версткааааа!

Итак, начну с начала, так всегда делает капитан очевидность.

Сижу, разбираю дивную верстку, точнее код. Написано все грамотно. Так как время на часах справа внизу уже позднее – делаю это неспешна. Мыслей о том, что полученный опыт буду писать на блог еще нету.

Для тех, кто знаком с версткой – обычное дело. Я был в этом новенький, потому меня заинтересовали боковые бордеры по 250пикселов каждый. С этого все и началось.

 

А скелет собственно выглядит вот так:

 

Начал уже и так крутить и сяк. Думаю, ну неужели 3 колонки по-другому “по-правильному” не сделать? Вроде бы же было куча статей, так нет, я эту нашел. “Мы знаете легких путей не ищем”.

“Но и не нужно усложнять себе жизнь!” – так то. Рыть гугл не стал, в очередной раз вписал какой то селектор или часть CSS  в гугл и наслаждался выдачей (да, все таки это был кусок кода CSS, точно помню)

В топе сидит уверенно htmlbook.ru – и правильно делает, ему там и место. Раньше так ним не пользовался, как сейчас.. насколько там все расписано, даже объектная модель в конце.. но топик не об этом.

 

И вдруг я замечаю (а раньше ж типа не видел не разу…)

Обвел синим, то что заметил. И нажал. Думаю, тут точно есть про 3 колонки, интересно, что напишут здесь.

И о чудо! Тут все просто!!!

Возрадовался я, ибо мой маразм начинал крепчать, но тут отпустило мгновенно!

Нужно просто поместить центральный блок туда куда нужно.

Один float:left; width:200px – sidebar left

Второй float:right; width:300px – sidebat right;

И третий, контент поставить маргины-лево-право размерами с боковушки. Чтобы он влез между ними. Написано об этом здеся – и все работает и все логично.

Ништяк

 

Все, на этом истории конец, а кто слушал молодец.

Не знаю, помогло кому то или нет, но мне точно. Решил поделится.

 

Чуть не забыл, один мой хороший знакомый, учились с ним вместе просил передать ссылку. Он там в каком-то конкурсе участвует, попросил поставить, мне не жалко: BestMasterиZация

Вот, вроде бы все. Успехов!