HTML Element Style How to - Create Two divs for menu and contents next to each other with transparent margins








Question

We would like to know how to create Two divs for menu and contents next to each other with transparent margins.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#menu {<!--  w w  w  .j a v  a 2s  . c om-->
  background-color: #FFD700;
  height: 400px;
  width: 150px;
  padding-left: 15px;
  padding-top: 10px;
  float: left;
}

#content {
  background-color: #EEEEEE;
  height: 400px;
  padding-top: 10px;
  padding-left: 10px;
  overflow: auto;
}
</style>
</head>
<body>
  <div id="menu">
    Menu 1<br /> Menu 2<br />
  </div>
  <div id="content">Contents..</div>
</body>
</html>

The code above is rendered as follows: