HTML Element Style How to - Align two divs horizontally

Question

We would like to know how to align two divs horizontally.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#content {<!--   w  ww.ja  va  2  s .  com-->
  text-align: center;
  vertical-align: top;
}

#search {
  display: inline-block;
  width: 300px;
  height: 350px;
  margin: 10px auto;
  overflow: auto;
  -moz-box-shadow: #555 0 0 8px;
  -webkit-box-shadow: #555 0 0 8px;
  -o-box-shadow: #555 0 0 8px;
  box-shadow: #555 0 0 8px;
}

#results {
  display: inline-block;
  width: 300px;
  height: 350px;
  margin: 10px auto;
  overflow: auto;
  -moz-box-shadow: #555 0 0 8px;
  -webkit-box-shadow: #555 0 0 8px;
  -o-box-shadow: #555 0 0 8px;
  box-shadow: #555 0 0 8px;
}
</style>
</head>
<body>
  <div id="content">
    <div id="search">
      <h2>First Box</h2>
    </div>
    <div id="results">
      <h2>Waiting!</h2>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: