Следующий код прекрасно работает в совместимых со стандартами браузерах, хотя может быть и намного лучше. Я просто немного изменил ваш код, но не думаю, что вы действительно понимаете блочную модель CSS. Все ваши границы и отступы добавляются к 100%, которые вы объявили, что делает, конечно, больше , чем 100%. Пожалуйста, прочитайте и поймите блочную модель CSS . Также я рекомендую использовать Строгий DOCTYPE. Я использовал XHTML, но вы могли бы также использовать HTML 4.01. И вы использовали <center>, что устарело.
Удачи.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>de titel</title>
<style type="text/css">
* {
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000000;
}
#wrapper {
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: -60px;
}
#header {
background-color: lightblue;
position: absolute;
top: 0;
width: 800px;
height: 60px;
}
#content {
height: 100%;
}
#menu {
width: 200px;
height: 100%;
background-color: gray;
float: left;
padding: 0 0 0 5px;
}
#text {
background-color: orange;
height: 100%;
margin-left: 200px;
padding-left: 15px;
margin-right: -2px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<p>image</p>
</div>
<div id="content">
<div id="menu">
Link 1
</div>
<div id="text">
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
</div>
</div>
</div>
</body>
</html>
Кстати, 100% означает 100%. Это не динамично. Если вы хотите, чтобы эти столбцы были на 100% при небольшом содержании, но при этом увеличивались при большом количестве содержимого, тогда ваша проблема носит только визуальный характер, и вы можете добиться желаемого эффекта, добавив вертикально повторяющееся фоновое изображение в оболочку, которая содержит цвета из двух столбцов. Затем вы удалили бы цвета bg из меню и текстовых элементов. Таким образом, оба столбца растут вместе с текстом. См. Также очень старую искусственную колонну технику.