floating

<!DOCTYPE html>
<html>
<head>
 <title>Permasalahan Floating</title>
 <style type="text/css">

 #wrapper{
  width : 960px;
  margin : 0 auto; /*agar wrapper tetap berada ditengah */
   }
 #header {
  width:100%;
  height:50px;
  background: orange;
  margin-bottom: 10px;
   }

 #content{
  padding:20px;
  background : green;
  margin-bottom : 10px;
   }

 #artikel{
  width : 600px;
  height : 700px;
  float : left;
  background: orange;
   }

  #sidebar {
  width : 300px;
  height: 200px;
  float : right;
  background: orange;
   }

  #footer{
  width : 100%;
  height: 50px;
  background: green;
   }
 </style>
</head>
<body>
<div id="wrapper">
 <div id="header"></div>
 <div id="content">
  <div id="artikel"></div>
  <div id="sidebar"></div>
 </div>
 <div id="footer"></div>
</div>
</body>
</html>