Ничего не могу поделать, бьюсь над этим уже 3 часа! Права колонка всегда уезжает вниз и всё тут! Вот этот злощастный шаблон! Помогите решить эту проблему, пожалуйста.
style.css
body {
margin: 0;
padding: 0;
background: #fff url(images/fon.jpg) repeat;
font-size: 12px;
color: #d1d5d8;
font-family: Verdana, Arial, sans-serif;
font-style: normal;
letter-spacing: 1px;
}
a {
color: #d1d5d8;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
header {
width: 1240px;
height: 120px;
margin: 0 auto;
}
#slogan {
margin: 0 auto;
padding: 30px 0 20px;
text-align: center;
line-height: 100%;
float: left;
}
#slogan h1 {
font-size: 30px;
}
#menu {
background: rgba(0,0,0,0.6);
margin: 20px 0px 0px;
}
nav {
margin: 0 auto;
padding: 10px 0px 10px;
width: 1250px;
}
nav a {
text-decoration: none;
display: inline-block;
padding: 10px;
}
nav a:hover {
color: #e53400;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 0 10px 0;
border-right: 2px solid #c7cccf;
position: relative;
}
nav ul li:hover {
background: #1d1d1d;
}
nav li ul {
display: none;
}
nav li:hover ul {
display: block;
position: absolute;
top: 40px;
left: 0px;
}
nav ul li ul li {
display: block;
text-align: left;
border: none;
background: #000;
padding: 0 20px 0;
}
nav ul li ul li a {
display: inline-block;
padding: 10px;
}
nav ul li ul li a:hover{
color: #e53400;
background: #1d1d1d;
}
.menu_text {
height: 20px;
padding: 10px 20px 10px;
}
main {
margin: 0 auto 20px;
padding: 20px;
overflow: hidden;
width: 1240px;
}
#left-column {
float: left;
width: 900px;
}
.content {
background: rgba(0,0,0,0.3);
float: left;
width: 900px;
margin: 20px 20px 10px 0;
padding: 20px;
}
.content:hover {
background: rgba(0,0,0,0.5);
}
#listing a {
color: #fff;
display: inline-block;
padding: 10px;
background: rgba(0,0,0,0.4);
}
#listing a:hover {
background: rgba(0,0,0,0.6);
}
#right-column {
float: left;
width: 240px;
padding: 20px;
margin: 0;
list-style: none;
background: rgba(0,0,0,0.3);
}
#right-column:hover {
background: rgba(0,0,0,0.5);
}
footer {
text-align: center;
background: rgba(255,255,255,0.5);
padding: 20px 0 20px;
margin: 0 auto;
width: 1240px;
}
footer:hover {
background: rgba(255,255,255,0.7);
}
/* время, ID, короткая ссылка и т.п. под каждым постом */
.additional {
width: 718px;
overflow: hidden;
font-size: 12px;
}
/* класс ссылки "Читать далее >>>" под каждой превией */
.more {
width: 718px;
text-align: center;
overflow: hidden;
}
.more a {
width: 718px;
background: rgba(0,0,0,0.4);
display: inline-block;
padding: 20px 0 20px;
color: #fff;
}
.more a:hover {
background: rgba(0,0,0,0.6);
}
index.html
<HTML>
<head>
<title>Название</title>
<meta charset="windows-1251">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="slogan">
<img src="images/logo.png">
</div>
</header>
<div id="menu">
<nav>
<ul>
<li><a href="index.php">Главная</a></li>
<li class="menu_text">Меню 1
<ul>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
</ul>
</li>
<li><a href="">Меню 2</a></li>
<li><a href="">Меню 3</a></li>
<li class="menu_text">Меню 4
<ul>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<main>
<div id="left-column>">
<div class="content">
<h1>Заголовок</h1>
<h2>Заголовок 2</h2>
Текст <a href="">ссылка</a>
<br><img src="raspberry-pi.jpg">
</div>
<div class="content">
<h1>Заголовок</h1>
Текст <a href="">ссылка</a>
</div>
<div class="content">
<h1>Заголовок</h1>
Текст <a href="">ссылка</a>
</div>
<div class="content">
<h1>Заголовок</h1>
Текст <a href="">ссылка</a>
</div>
</div>
<div id="right-column">
<h2>Название</h2>
Текст
</div>
</main>
<footer>
Подвал сайта
</footer>
</body>
</HTML>