Hallo,
Ik heb een probleem omtrent CSS.
Mijn layout heeft 3 kolommen waarvan alledrie de kolommen de hoogte moeten krijgen van de browser, dus 100%.
Menu, main en sidebar zijn de kolommen.
In main zit de header, nav en content.
Dus het gaat hier over Menu, main en sidebar!
Mijn HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>XXX</title>
<link rel="stylesheet" type="text/css" href="/layout/css/style.css" />
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li>aa</li>
<li>aa</li>
<li>aa</li>
</ul>
</div>
<div id="main">
<div id="header">
</div>
<div id="nav">
<ul>
<li>aa</li>
<li>aa</li>
</ul>
</div>
<div id="content">
content
</div>
</div>
<div id="sidebar">
<ul>
<li>aa</li>
<li>aa</li>
<li>aa</li>
</ul>
</div>
</div>
</body>
</html>En mijn CSS code:
Code
body {
margin: 0px;
font:12px arial,helvetica,"Liberation Sans","DejaVu Sans Condensed",sans-serif;
}
ul, li {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
}
#wrapper {
margin: 0xp auto;
width: 100%;
}
#menu {
float: left;
width: 17%;
background-color: blue;
}
#nav {
}
#nav li {
float: left;
}
#header {
}
#sidebar {
float: left;
width: 17%;
background-color: green;
}
#main {
float: left;
width: 66%;
background-color: yellow;
}Hopelijk kan iemand me helpen.
Groeten.
