| |
|
|
| | Не пойму!
Экспериментировал и чуть не сошел с ума. Прошу помощи.
Есть 3 колонки:
Правый, Центр, Левый. Они в DIVах, находятся они в DIV#wrapper
Ниже DIV#wrapper есть DIV#footer
вот этот DIV#footer лезет на DIV#wrapper, че делать не знаю.
Свойства CSS показать для каждого слоя? | |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.04.2011 в 08:29)
| | | Объясняю принцип.
Три Ваши колонки ПО-ЛЮБОМУ каждая имеет, кроме прочих, свойство стиля FLOAT, вот так:
<div style="float: left">1 колонка</div>
<div style="float: left">2 колонка</div>
<div style="float: left">3 колонка</div>
|
Находятся все три эти колонки в одном внешнем DIV#wrapper, или не находятся - это НЕ ВАЖНО.
ВАЖНЫМ является то, что после последней колонки при переходе на новый "уровень ниже" надо обязательно "сбросить" FLOAT.
Лучше всего для этого подойдёт пустой невидимый DIV дефолтной ширины (т. е. значение для свойства стиля width указывать НЕ НАДО). Вот так:
<div style="overflow: hidden; clear: all; height: 1px; display: none"></div>
|
Этот пустой DIV можете вставить как вовнутрь Вашего DIV#wrapper (последним), так и сразу после DIV#wrapper.
А уже ПОТОМ "рисуйте" свой DIV#footer. | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(08.04.2011 в 09:04)
| | | Спасибо за ответ!
Знаете, я и это пробовал - не помогает. А наоборот. Теперь с #wrapper на одном уровне находится, если раньше лез на него только снизу | |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.04.2011 в 09:10)
| | | Пробовали, говорите?
Хе-хе...
Попробуйте тогда ИШШО раз, теперь без ошибок:
<div style="overflow: hidden; clear: both; height: 1px"></div>
|
| |
| |
|
|
| |
|
|
| |
для: Абырвалг
(08.04.2011 в 10:44)
| | | И так пробовал исправлять :) НЕ помогает | |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.04.2011 в 10:47)
| | |
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<div id="wrapper">
<div style="float: left; width: 111px; background-color: red">1 колонка</div>
<div style="float: left; width: 222px; background-color: aqua">2 колонка</div>
<div style="float: left; width: 333px; background-color: lime">3 колонка</div>
<div style="overflow: hidden; clear: both; height: 1px"></div></div>
<div id="footer" style="background-color: yellow">Футер</div>
</body>
</html>
|
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.04.2011 в 08:29)
| | | <div id="wrapper">
<div style="float: left">1 колонка</div>
<div style="float: left">2 колонка</div>
<div style="float: left">3 колонка</div>
<div style="clear:both;"></div>
</div>
123 | |
| |
|
|
| |
|
|
| |
для: AlexSol
(08.04.2011 в 11:03)
| | | нет, никак не помогает.
Если только высоту поставить фиксированную - но это не выход для динамичного контента:
<div id="wrapper">
<div style="float: left">1 колонка</div>
<div style="float: left">2 колонка</div>
<div style="float: left">3 колонка</div>
<div style="clear:both; height:100px;"></div>
</div>
123 | |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.04.2011 в 08:29)
| | | Чтобы было понятно покажу наглядно мой код:
<html>
<body>
<style type="text/css">
#site{
margin:0 auto;
width:100%;}
#header{
position:relative;
height:210px;}
#contentwrapper{
float: left;
width: 100%;}
#contentcolumn{
margin:0 330px 25px 240px;
padding:0 20px;
border-left:1px solid #999;
border-right:1px solid #999;}
#leftcolumn{
margin-right:-210;
float: left;
padding-left:10px;
width: 220px; /*Width of left column*/}
#rightcolumn{
float: left;
padding-right:10px;
width: 300px; /*Width of right column*/
margin-left: -310px; /*Set left marginto -(RightColumnWidth)*/}
#footer{
clear:both;
position:relative;
z-index:-1;
width: 100%;
background:url(/i/city.gif) right bottom repeat-x;
height:200px;}
</style>
<div id="site">
<div id="header"></div>
<div id="contentwrapper">
<div id="leftcolumn"></div>
<div id="contentcolumn"></div>
<div id="rightcolumn"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.04.2011 в 11:38)
| | |
<html>
<body>
<style type="text/css">
#site{
margin:0 auto;
}
#header{
position:relative;
height:210px;}
#contentwrapper{
}
#contentcolumn{
padding:0 350px 25px 260px;
float:left;
border-left:1px solid #999;
border-right:1px solid #999;}
#leftcolumn{
margin-right:-220;
float: left;
width: 220px;}
#rightcolumn{
float: left;
width: 310px;
margin-left: -310px;}
#footer{
position:relative;
background:url(/i/city.gif) right bottom repeat-x;
height:200px;}
.clear{clear:both;}
</style>
<div id="site">
<div id="header"></div>
<div id="contentwrapper">
<div id="leftcolumn"></div>
<div id="contentcolumn"></div>
<div id="rightcolumn"></div>
<div class="clear"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(08.04.2011 в 12:38)
| | | вот так реально помогло! Понял в чем моя ошибка была. Спасибо! | |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.04.2011 в 15:17)
| | | Знаете, все таки не помогло... все равно лезет | |
| |
|
|
| |
|
|
| |
для: Ильдар
(17.04.2011 в 17:22)
| | | Все!! Простите все за беспокойство излишнее! Я нашел свой действительный косяк, в одном месте забыл DIV закрыть это после contentwrap
НЕВНИМАТЕЛЬНОСТЬ - ПРИЧИНА МНОГИХ ПРОБЛЕМ! | |
| |
|
|
