вопрос
Много разглагольствовать не буду, предлагаю сразу обратить внимание на скрины:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style>
*{margin:0;padding:0;border:none;}
body{font:normal 12px Arial;color:#333;}
#wrapper{width:900px;padding:10px;margin:20px auto;background:#f3f5f7;border:1px solid #ccc;}
#side{float:right;width:290px;}
.block{padding:20px 0;background:#f7fafa;}
.block h4{font-size:14px;font-weight:bold;padding-bottom:15px;text-align:center;}
#content{margin-right:300px;}
.story{padding:0 10px 10px;margin-bottom:20px;background:#f0f0f0;border:1px solid #e0e0e0;}
.story h1{font-size:16px;padding:10px 0;font-weight:bold;}
.story img{width:200px;height:120px;float:left;}
.story p{margin-left:220px;}
.clr{clear:both;overflow:hidden;height:0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="side">
<div class="block">
<h4>Навигация</h4>
<p>Какой-то текст блока</p>
</div>
<div class="block">
<h4>Голосование</h4>
<p>Какой-то текст блока</p>
</div>
<div class="block">
<h4>Архив</h4>
<p>Какой-то текст блока</p>
</div>
</div>
<div id="content">
<div class="story">
<h1>Заголовок новости</h1>
<img src="" alt="" />
<p>Тут какой-нибудь текст к новости</p>
<div class="clr"></div>
</div>
<div class="story">
<h1>Заголовок новости</h1>
<img src="" alt="" />
<p>Тут какой-нибудь текст к новости</p>
<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>
Ответил: ПафНутиЙ
* {
margin: 0;
padding: 0;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 150px;
background: #FFE680;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {
padding: 0 320px 0 0;
}
.story{padding:0 10px 10px;margin-bottom:20px;background:#f0f0f0;border:1px solid #e0e0e0;}
.story h1{font-size:16px;padding:10px 0;font-weight:bold;}
.story img {
float: left;
padding: 0 10px 10px 0;
overflow: hidden;
width:200px;
height:120px;
}
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
float: left;
margin-right: -3px;
width: 300px;
margin-left: -300px;
position: relative;
background: #FFACAA;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
height: 100px;
background: #BFF08E;
}
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; } <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="wrapper">
<header id="header">
<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
</header><!-- #header-->
<section id="middle">
<div id="container">
<div id="content">
<div class="story clearfix">
<h1>Заголовок новости</h1>
<img src="" alt="" />
<p>Тут какой-нибудь текст к новости</p>
</div>
<div class="story clearfix">
<h1>Заголовок новости</h1>
<img src="" alt="" />
<p>Тут какой-нибудь текст к новости Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quasi reiciendis amet odio esse laborum tempora corporis cupiditate maiores aliquam qui sequi earum veritatis iusto unde. Ipsa aut velit omnis possimus eum dolores eius ea doloremque dicta natus voluptate nulla ratione earum id nihil consectetur sunt rem. Corrupti alias impedit quisquam facere molestias voluptatibus sit ipsum aspernatur libero fugit error dicta nam numquam assumenda aut sunt delectus nisi aperiam quaerat pariatur nobis adipisci quia est odio ullam deserunt architecto maxime sequi recusandae optio temporibus soluta consequatur iste nostrum eligendi tempora enim dolor. Quis et recusandae pariatur commodi placeat rerum aperiam quaerat dolore impedit necessitatibus voluptatum veritatis porro tempore facilis dolores cumque deserunt ipsa incidunt accusantium assumenda tenetur explicabo optio asperiores excepturi temporibus praesentium veniam soluta itaque reiciendis quos obcaecati odit minima error! Placeat neque eos maiores blanditiis nesciunt quod perspiciatis distinctio accusantium necessitatibus at facilis dolores voluptates omnis alias reiciendis.</p>
</div>
<div class="story clearfix">
<h1>Заголовок новости</h1>
<img src="" alt="" />
<p>Тут какой-нибудь текст к новости</p>
</div>
<div class="story clearfix">
<h1>Заголовок новости</h1>
<img src="" alt="" />
<p>Тут какой-нибудь текст к новости</p>
</div>
</div><!-- #content-->
</div><!-- #container-->
<aside id="sideRight">
<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
</aside><!-- #sideRight -->
</section><!-- #middle-->
<footer id="footer">
<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</footer><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
