назад

Одинаковые колонки при дивовой верстке

дивовая верстка. 3 одинаковых колонки

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

Так вот, сегодня оказалось, что все намного проще и терерь дивы с легкостью применяются даже при резиновой верстке для этого делаем следующее:

В самом файле .html имеем, допустим, следующее:

< div id="div">
  < div id="div1">
< /div>
< div id="div2">
< /div>
< div id="div3">
< /div>
< /div>

При том при описании стилей этих слоев прописываем:

#div1 , #div2, #div3
{
   padding-bottom:10000px;
   margin-bottom:-10000px;
	 }

#div {
      overflow:hidden;
     _zoom:1;/*Для 6-го IE, задаем hasLayout, на эту 
          тему есть много постов на хабре*/
}

Добавляя огромный отступ паддингом, мы компенсируем его марджингом, в результате чего появляется продолжение сайта вниз, в котором не может быть контента. А окружающий столбцы див обрезает их на ту высоту, которая нужна...

Как говорится, все гениальное просто...=)))



назадпросмотров:492.


Если вам понравилась эта статья, вы можете подписаться на рассылку RSS по email:


Комментарии

комментариев: 3

написал: dizopishids2009-12-25

На нашем сайте все SEO. Партнерские программы для заработка в интернете. Новости блогосферы рунета. Юмор и прикольные истории.

написал: dizopishids2009-12-25

В блоге Джалалова вы найдёте статьи о SEO, эксперименты с SEO, SEO на практике и вы сами сможете научиться SEO, если вы будете читать постоянно блог. Пишу о заработке в интернете, как можно заработать на партнёрских программах, как можно заработать на блоге и монетизировать свой блог, пишу о создании блогов. Все самые свежие новости и статьи о блоггинге увидите в блоге. Спасибо за внимание!

написал: SoodUlmostell2010-02-03

Очень полезно


Добавить комментарий

Login:

e-mail: (не публикуется)

web-site:

Введите текст комментария: