CSS Layout How to - Horizontally center an element and put another element to its right

Question

We would like to know how to horizontally center an element and put another element to its right.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#center {<!--from  w ww . ja  va  2  s. co  m-->
  position: relative;
  height: 100px;
  width: 60%;
  margin: auto;
  background: beige;
}

#right {
  position: absolute;
  right: -20%; /* the div's width */
  top: 0;
  width: 20%;
  background: orange;
  height: 100px;
}
</style>
</head>
<body>
  <div id="center">
    CENTER
    <div id="right">right</div>
  </div>
</body>
</html>

The code above is rendered as follows: