Я пытаюсь завершить CSS и разметку для своего сайта (jonathanbuys.com), но у меня есть эта досадная проблема, которую нужно устранить.Для страниц, на которых весь текст можно просматривать по горизонтали без прокрутки, для моего поля нижнего поля правильно установлено значение 30 пикселей.Однако, как только содержимое превышает горизонтальный размер окна браузера, нижнее поле исчезает.
Я проверил это с помощью Firefox, Safari, Chrome и ночных Webkit, и, похоже, это происходит только с браузерами на основе Webkit.
Вот соответствующий CSS:
#wrapper{
width: 720px;
height: auto;
margin: 30px auto 30px auto;
padding: 3em 3em 3em 3em;
border: 1px solid #ccc;
text-align: left;
background: white;
-webkit-box-shadow: 2px 2px 8px #aaa;
-moz-box-shadow: 2px 2px 8px #aaa;
box-shadow: 2px 2px 8px #aaa;
}
И основной макет сайта:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="logobox">
</div>
<div id="pages">
</div>
</div>
<div id="content">
<h2>Heading</h2>
<p class="thin_line"></p>
<div id="post">
text
</div>
</div> <!-- End of content div -->
<div id="footer">
<p class="thin_line"></p>
</div>
</div>
</body>
</html>
Есть идеи, что мне не хватает?
Заранее спасибо.