Выравнивание: почему sidebar не перемещается?
Здравствуйте!
Есть задание: сверстать страничку по макету. Вроде бы всё получается, но с sidebar'ом что-то не так. На пикчах оригинал, и что сверстал я на данный момент. Вопрос такой: как переместить sidebar вверх, почему не перемещается? Стоит же вроде float: right;.
Оригинал: http://i64.fastpic.ru/big/2014/0930/26/ac521fc469ea21650795f447130cb126.png
Что у меня: http://i64.fastpic.ru/big/2014/0930/82/23272f7dfa9f5e690a48301bce146582.jpg
<!DOCTYPE html> <html>
<head>
<title>clear breeze</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>clear breeze</h1>
<p><em>template design by zzz templates</em></p>
</div>
<div id="page">
<div id="menu">
<ul>
<li><a href="http://ya.ru">Home</a></li>
<li><a href="http://ya.ru">Blog</a></li>
<li><a href="http://ya.ru">About</a></li>
<li><a href="http://ya.ru">Contact</a></li>
</ul>
</div>
<div id="banner"></div>
<div class="content">
<h2 class="title">Welcome to Clear Breeze</h2>
<p class="meta">Sunday, April 26, 2009 7:27 AM Posted by
<u>Someone</u></p>
<p class="text">Sed Iacus. Donec lectus. Nullam pretius nibh
ut tupris. Nam bibendum. In nulla tortor, elementum vel,
tempor at, varius non, purus. Mauris vitae nisl nec
consectetuer. Donec ipsum. Proin imperdiet est.
Phasellus <a href="http://ya.ru">dapibus semper uma</a>.
Pellentesque ornare, orci in consectetuer hendrerit,
urna elit eleifrend nunc, ut consectetuer nisl felis ac
diam. Etiam non felis. Donec ut ante. In id eros.</p>
<p class="links"><a href="http://ya.ru">View Full Story</a></p>
<p class="links"><a href="http://ya.ru">View Comments</a></p>
</div>
<div class="content">
<h2 class="title">Lorem Ipsum Sed Aliquam</h2>
<p class="meta">Sunday, April 26, 2009 7:27 AM Posted by
<u>Someone</u></p>
<p class="text">Sed Iacus. Donec lectus. Nullam pretius nibh
ut tupris. Nam bibendum. In nulla tortor, elementum vel,
tempor at, varius non, purus. Mauris vitae nisl nec
consectetuer. Donec ipsum. Proin imperdiet est.
Phasellus <a href="http://ya.ru">dapibus semper uma</a>.
Pellentesque ornare, orci in consectetuer hendrerit,
urna elit eleifrend nunc, ut consectetuer nisl felis ac
diam. Etiam non felis. Donec ut ante. In id eros.</p>
<p class="links"><a href="http://ya.ru">View Full Story</a></p>
<p class="links"><a href="http://ya.ru">View Comments</a></p>
</div>
<div class="content">
<h2 class="title">Lorem Ipsum Sed Aliquam</h2>
<p class="meta">Sunday, April 26, 2009 7:27 AM Posted by
<u>Someone</u></p>
<p class="text">Mauris vitae nisl nec metus placerat
consectetuer. Donec ipsum. Proin imperdiet est. Sed
Iacus. Donec lectus. Nullam pretium nibh ut turpis. Nam
bibendum. In nulla tortor, elementum vel, tempor at,
varius non, purus. Mauris vitae nisl nec metus placerat
consectetuer. Donec ipsum. Proin imperdiet est.
Phasellus<a href="http://ya.ru">dapibus semper uma</a>.
Pellentesque ornare, orci in consectetuer hendrerit,
urna elit eleifrend nunc, ut consectetuer nisl felis ac
diam.</p>
<p class="links"><a href="http://ya.ru">View Full Story</a></p>
<p class="links"><a href="http://ya.ru">View Comments</a></p>
</div>
<div id="sidebar">1111qqqqqqq
<div id="sidebar_top">qqqqq</div>
<div id="sidebar_cen"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
body{
background-image: url(images/img01.jpg);
background-position: top left;
background-repeat: repeat-x;
font-family: Arial;
margin: 0;
padding: 0;
}
#header{
width: 940px;
height: 128px;
margin: 0 auto;
padding: 40px 0px 0px 40px;
}
#header h1, #header p{
margin: 0px;
font-weight: normal;
color: #FFFFFF;
}
#header h1{
padding-top: 15px;
font-size: 48px;
}
#header p {
margin-top: -4px;
font-size: 13px;
color: #FFA25D;
}
#menu {
float: left;
width: 730px;
height: 59px;
padding: 0px 0px 0px 0px;
background: url(images/img02.jpg) no-repeat left top;
}
#page{
width: 980px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
}
#banner{
float: left;
background: url(images/img03.jpg) no-repeat bottom left;
width: 730px;
height: 313px;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 40px;
list-style: none;
}
#menu li {
float: left;
height: 31px;
padding: 28px 24px 0px 24px;
background: url(images/img09.jpg) no-repeat right 28px;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FF9EA2;
}
#menu a{
text-decoration: none;
color: #FF9EA2;
}
#sidebar{
float: right;
width: 250px;
margin: 0;
padding: 0;
}
#sidebar_top{
float: right;
width: 250px;
font-family: Arial;
font-size: 12px;
//margin-top: -59px;
background: url(images/img05.jpg) no-repeat left;
padding: 200px 0px 170px 0px;
}
#sidebar_cen{
float: right;
width: 250px;
font-family: Arial;
font-size: 12px;
padding: 0px 0px 200px 0px;
background: url(images/img06.jpg) repeat-y left top;
}
#sidebar_bot{
float: right;
width: 250px;
font-family: Arial;
font-size: 12px;
background: url(images/img07.jpg) norepeat left ;
}
.content{
width: 730px;
height: 60px;
float: left;
margin-bottom: 240px;
margin-top: 8px;
background: url(images/img04.jpg) no-repeat left top;
}
.title{
height: 44px;
padding: 0px 30px 10px 40px;
text-decoration: none;
text-transform: capitalize;
font-size: 30px;
color: #A7D100;
font-weight: normal;
}
.meta{
height: 32px;
margin-left: 2px;
margin-top: -40px;
padding: 0px 30px 2px 40px;
font-family: Arial;
font-weight: normal;
font-style: italic;
font-size: 11px;
color: #C7A302;
}
.text{
font-family: Arial;
font-size: 12px;
color: #8A8A8A;
line-height: 240%;
text-align: justify;
padding: 0px 30px 10px 40px;
}
.text a{
color: #961A06;
}
.links{
display: block;
width: 120px;
height: 18px;
margin: 0px;
padding: 3px 0px 0px 40px;
background: url(images/img06.gif) no-repeat left top;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
font-weight: bold;
color: #961A06;
}
.links a{
text-decoration: none;
color: #961A06;
}
Источник: Stack Overflow на русском