Контент лезет на футер, помогите

Xrusterik Xrusterik   18.12.2012 14:49   380  
Добрый день. Начал верстать сайт и решил использовать блоки, а не таблицы, но сразу столкнулся с проблемой. Какая проблема? Когда я наполняю блок контента, то текст залезает на футер, если и контент написать ровно до футера, то при изменении масштаба браузера, контент всё равно лезет на футер (подвал). Пробовал задать проценты, а не фиксированное значение высоты, но тогда блоки меню и рекламы не окрашивались, тоесть обрезались взависимости от величины в них строк (думаю какждый с этим сталкивался),а мне нужно чтобы фон левого и правого блока опускался до футера и их размеры менялись от количества контента, тоесть чтобы средний блок мог растягиваться вниз, но при этом и тянул левый и правый блок. Фиксированная высота не подходит, ведь не всегда пишу равное количество символов. Второй день голову ломаю, что только не пробывал, подвал задевает текст. Как реализовать так, чтобы высота боковых блоков зависила от величины контента среднего блока? А то так не хочется снова верстать на таблицах, ведь та проблем нет, а хочу дивами. 

Стили:

body
{
background-color:#FFFFC9;
color:#000000;
margin-left:auto;
margin-right:auto;
font-family:'Times New Roman', Times, serif;
font-size:12pt;
}

#kontent
{
height:1700px;
width:1000px;
background-color:#ffffff;
color:#000000;
margin:0px auto;
border-right:2px solid #EBEB97;
border-left:2px solid #EBEB97;
}
#menu
{
height:1700px;
width:200px;
background-color:#FFFFAB;
color:#000000;
float:left;
margin:0px auto;
border-right:2px solid #EBEB97;
}
#text
{
height:1690px;
width:586px;
background-color:#ffffff;
color:#000000;
float:left;
padding:5px;
overflow:auto;
}
#reklama
{
height:1700px;
width:200px;
background-color:#FFFFAB;
color:#000000;
float:right;
margin:0px auto;
border-left:2px solid #EBEB97;
}
#podval
{
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
height:50px;
width:1000px;
background-color:#FFDC83;
color:#000000;
margin:0px auto;
text-align:center;
padding-top:5px;
border:2px solid #EBEB97;
}
html:

<html>
<head>
</head>
<body>
<div id="kontent">
<div id="menu">
меню
</div>
<div id="text">
контент
</div>
<div id="reklama">
реклама
</div>
</div>
<div id="podval">
подвал
</div>
</body>
</html>


Ответы на вопрос (8) Написать ответ
mav123 mav123   18.12.2012 15:47
height: не задавай фиксированно в пикселях и будет тебе счастье
0
mav123 mav123   18.12.2012 15:49
Найди в сети похожую вёрстку и посмотри как делали вёрстку - самый верный и быстрый способ найти решение.
0
mav123 mav123   18.12.2012 15:52
И надо брать за правило давать ссылку на страницу - без ссылки очень сложно дать совет.
0
Xrusterik Xrusterik   18.12.2012 15:55
Ссылку бы дал, но делаю пока локально, бех хостинга.
0
Xrusterik Xrusterik   18.12.2012 15:57
Если не задаю, то контент ведёт себя правильно, это уже пробовал, но левый и правый блок не хочет принимать фон до футера(((( Вон этих блоков остаётся фоном body. Как только я начинаю писать в боковых блоках, вон их окрашивается но на высоту введённого текста.(
0
Xrusterik Xrusterik   18.12.2012 16:13
Вот скрин, по тему понятно о чём я, что фон окрашивается боковых блоков взависимости от введённой инфо в них. А я хочу, чтобы до футера фон был.
http://uld1.odnoklassniki.ru/getImage?photoId=503381319168&photoType=0
0
Xrusterik Xrusterik   18.12.2012 16:31
Появилась идея задать html {height:100%} задать главному блоку mih-height:100%. Поработаю над этим, попробую, может что и выйдет.
0
Xrusterik Xrusterik   18.12.2012 17:02
Моя идея подтвердилась, значит сделал так.
Задал высоту html тоесть браузера в 100% (html:{height:100%;}) и очистил браузерные элементы (* {margin:0; padding:0;})
Сделал большой основной блок высотой 100%, в нём раместил все остальные блоки используя float, где нужно чистил c помощью clear. Всё убралось в одном главном блоке, хотя у меня и есть в шапке изображение разбитое на 7 частей. Теперь я задаю фон главному блоку, который совпадает у меня с цветом боковых блоков. Для всех блоков(центральный и 2 боковых) задаю высоту min-height:100%; блоки раздвинуль в высоту но не до низу, но тут и срабатывает фон главного блока, который всё таки и заливает не восполненную часть нужным мне цветом. Вуаля, всё получилось, футер не сьезжает, текст на него не заезжает при любом масштабировании браузера. 2 дня голову ломал, а оказалось всё так просто)
0

Войдите, чтобы написать ответ
Вход Регистрация

Увеличение продаж на сайте на 75% без затрат на рекламу и прочие расходы! Каждый посетитель станет вашим клиентом.