nicht angemeldet
Hallo!
Ich entwickele gerade ein CSS-basiertes Layout. An einer Stelle hab ich ein Problem: Es soll rechts des Inhaltsbereiches ein Bereich für diverse ergänzende Inhalte in Form von Boxen zur Verfügung gestellt werden. Dieser soll rechts "gefloatet" werden.
Leider beginnt dieser Bereich erst unter den divs, die links davon stehen.
Kann jemand mal über den HTML- und CSS-Code sehen und mir einen Tipp geben?
(Und vielleicht kann der/diejenige mir auch sagen, warum #main im IE viel zu hoch ist?)
Vielen dank im Voraus!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout-Prototyp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page">
<div id="page_header">
Hier kommt das Logo rein.
</div>
<div id="page_menu">
<ul>
<li>Menü-Item1</li>
<li>Menü-Item2</li>
</ul>
</div>
<div id="main">
<div id="main_header">
<div id="main_menu">
Menü2
</div>
<div id="main_search">
Suchen
</div>
</div>
<div id="main_content">
<div id="content">
Inhalt
</div>
<div id="content_footer">
Fußleiste
</div>
</div>
<div id="sidebar">
Soll rechts des Inhaltes erscheinen
</div>
</div>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
color: black;
font-size: 100.01%;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
/*background-color: rgb(247, 241, 179);*/
}
#page {
padding: 0.2em;
height: 100%;
margin: 0 auto;
}
#page_header {
height: 20%;
border: 1px solid black;
}
#page_menu {
border: 1px solid black;
float: left;
width: 16em;
margin: 0;
height: 80%;
}
#page_menu ul {
}
#page_menu li {
list-style: none;
margin: 0;
padding: 0;
}
#main {
margin-left: 16em;
border: 1px solid black;
height: 80%;
}
/*#main_header {
}
*/
#main_menu {
float: left;
width: 35em;
border: 1px solid black;
}
#main_search {
margin-left: 35em;
border: 1px solid black;
}
#main_content {
margin-right: 15em;
border: 1px solid black;
height: 95%;
}
#content {
height: 90%;
border: 1px solid black;
}
#content_footer {
height: 10%;
border: 1px solid black;
}
#sidebar {
float: right;
width: 14em;
margin: 0;
padding: 0;
border: 1px solid black;
height: 80%;
}