Резиновая верстка. Позиционирование. Footer.

[maxpopov]

Приветствую!

Помогите советом, как решить данную задачу.

Ситуация следующая. Встала задача написать сайт визитку с резиновой версткой своими силами. Имел небольшой опыт только со статической версткой, по этому с резиновой возникли проблемы. Макет выглядит следующим образом (во вложении Макет). Практически каждая полоса отведена под какой то контент ( меню, логотип с названием, различный контент и подвал ). Весь контент будет статическим, расположенным в блоке ( блок с черным бордером ) шириной 960px по центру. Для пользователя естественно не будет виден весь этот бутерброд из блоков, но мне хотелось бы это все, как то оптимизировать и написать наименьшим количеством блоков. С моим небольшим опытом я увидел 2 варианта.

Вариант 1. Сделать все эти полосы отдельными, резиновыми блоками их получается 9. По верх, по центру разместить блок в 960px. Далее в этот блок вложить 9 блоков с высотой идентичной блокам в первом слое, чтобы их границы соответствовали и уже в них размещать необходимый контент. Тем самым получится, что контент остается в центе, а левое и правое, как где то на просторах интернета мне попадалось "ухо", будут растягиваться относительно разрешения. Понимаю, что при большом разрешении будет смотреться ужасно, но к сожалению на то, чтобы разобраться с адаптивной версткой у меня сейчас нет времени. Нужно выложить, что то работающее на часто встречающихся разрешениях, а уже потом будет время оптимизировать или переделать под большие разрешения ну и под мобильные устройства. Почему используется слой блоков, а не фоновая картинка с полосками? Потому, что это не совсем фон, это скелет страницы, или как его правильно назвать, макет! В процессе наполнения контентом некоторые полоски(блоки) нужно будет подгонять по высоте, а также при переходе на другие страницы блок контента (центральная часть) будет меняться.

Вариант 2. В данном макете используется три цвета: светло-серый, серый, и темно-синий. Я решил, что если избавиться от светло-серых блоков. Расположив оставшиеся с помощью позиционирования в нужные места, а промежутки между ними будут в место тех блоков, так как тегу "body" задан цвет фона светло-серый. И вот тут возникла проблема, я разместил меню и заголовок в верху страницы "top-ом", а подвал в низу "booton-ом". Но когда я "top-ом" размешаю в нужной позиции контент, то он наезжает на подвал. Физически с помощью "top-а" я задать подвал не могу потому, что высота контента на разных страницах разная, а "bootom" ..., в общем тоже не работает.

Что то я много написал. В общем хотелось бы услышать советы, какой макет или скелет должен быть у данного дизайна? И как во втором варианте, если использовать его, прилепить подвал к контенту, что бы не зависимо от количества контента (влияющего на высоту этого блока), подвал находился сразу после него?!

Спасибо!