Не получается спозиционировать сайдбар

nikudza · May 21, 2011

Может здесь помогут... Хелп, едет крыша!

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

Короче, код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Страница</title>
<link href="style2.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="content">

<div id="header">
HEADER
</div>

<div id="background"></div>

<div id="main">
<p>
Content 
Content Content Content Content Content Content Content Content Content 
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content

</p>

</div><!--end main-->

<div id="sidebar">
<p>
Sidebar
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
</p>
</div>

<div class="empty"></div>
</div><!--end content-->

<div id="footer"> footer </div>

</body>
</html>

html, body{
margin:0;
padding:0;
width:100%;
height:100%;
}

#header{
height:80px;
width:100%;
background-color:yellow;
}


#content{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
text-align:justify;
background-color:green;
}

#content p{
padding:10px 15px 10px 7px;
margin:0;
}

#content .empty{
height:50px;
position:relative;
border:1px black dotted;
}


#background{
position:absolute;
top:80px;
right:250px;
bottom:0;
left:0;
background-color:white;
}

#main{
position:relative;
min-height:100%;
height:100%;
margin-right:250px;
background-color:fff;
}

#sidebar{
width:250px;
position:absolute;
top:80px;
right:0;
}

#sidebar p{
margin:10px;
background:blue;
}

#footer{
position:relative;
margin-top:-20px;
height:20px;
width:100%;
background-color:brown;
text-align:center;
}

Содержимое колонок оставил специально, наглядности для, из кода же постарался всё лишнее убрать, но если где-то какие-то следы экспериментов - уж не обессудьте!

Посмотреть:

Просто страница

Хорошая, годная страница (сайдбар короче и всё норм)

Плохая страница (сайдбар пробил футер)

С float-ом уже советовали

Цвета специально вырвиглазные, для наглядности же))

Edited May 21, 2011 by nikudza

buddah · May 21, 2011

поищи в соседних темах как нужно прижимать футер, это обсуждалось много раз.

nikudza · May 22, 2011

Да футер-то прижат, но только content-ом и дочерним main-ом, а сайдбар всё равно проваливается. ПОД прижатый футер. Потому что спозиционирован абсолютно и, соответственно, с родительским дивом (content) свои действия не соотносит. А если его позиционировать relative, то вообще странно себя ведет и жмется к левому краю и вниз, хоть и пишу ему top:0; right:0;.

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

buddah · May 22, 2011

Зачем футеру позиционирование включать?

Edited May 22, 2011 by buddah

nikudza · May 22, 2011

Тут не уверен, может и необязательно. Только что попробовал отключить - вроде и без него работает. Да только не суть это...

igon · May 22, 2011

На скорую руку сделал

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Страница</title>

</head>

<body>

HEADER

</div>

<p>

Content

Content Content Content Content Content Content Content Content Content

Content

</p>

</div>

</div>

<p>

Sidebar

Link

</p>

</div>

</div>

<div id="footer"> footer </div>

</body>

</html>

html, body{

margin:0;

padding:0;

width:100%;

height:100%;

}

#header{

height:80px;

width:100%;

background-color:yellow;

}

#content{

position:relative;

min-height:100%;

text-align:justify;

background:green;

}

#background {

background:#fff;

bottom:0;

left:0;

position: absolute;

right:250px;

top:80px;

}

#content p{

padding:10px 15px 10px 7px;

margin:0;

}

#content .empty{

height:50px;

position:relative;

border:1px black dotted;

}

#main{

margin:0 250px 0 0;

position:relative;

}

#sidebar{

width:250px;

float:right;

}

#sidebar p{

margin:10px;

background:blue;

}

#footer{

position:relative;

margin-top:-20px;

height:20px;

width:100%;

background-color:brown;

text-align:center;

}

.container {

width:100%;

overflow:hidden;

}

.container-main {

width:100%;

float:left;

}

.main-content{

width:100%;

float:left;

}

nikudza · May 22, 2011

igon, кажется, ты спас меня от разрыва мозга, бьюсь над этой штуковиной уже не первую неделю!

Огромное спасибо! Буду теперь разбираться))

Не знаю, какая здесь, на этом форуме, система благодарностей, как я могу осуществить тебе плюс в репу или что-то подобное?

Edited May 22, 2011 by nikudza

psywalker · May 22, 2011

igon

Ещё раз сделаешь такое безобразие с кодом (НЕ поместишь его в спец. теги), бан тебе обеспечен.

nikudza · May 23, 2011

psywalker, не наказывайте его, он сегодня, между прочим, жизнь спас!.. На скорую руку))

psywalker · May 23, 2011

psywalker, не наказывайте его, он сегодня, между прочим, жизнь спас!.. На скорую руку))

Жизни спасает, а правила форума не читает вообще!

Sign In

Не получается спозиционировать сайдбар

Question

nikudza

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

buddah

Link to comment

Share on other sites

nikudza

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

nikudza

Link to comment

Share on other sites

igon

Link to comment

Share on other sites

nikudza

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

nikudza

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information