Jump to content
  • 0

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


nikudza
 Share

Question

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

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

Короче, код:

<!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 by nikudza
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

<!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 class="container">

<div class="container-main">

<div id="main">

<div class="main-content">

<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>

</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>

</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%;

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;

}

Link to comment
Share on other sites

  • 0

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

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

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

Edited by nikudza
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy