CSS Layout How to - Place two DIV on the same line with one aligned to the left and one aligned to the right without an HTML table

Question

We would like to know how to place two DIV on the same line with one aligned to the left and one aligned to the right without an HTML table.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.votediv {<!-- ww  w.jav  a 2s.  c  om-->
  float: right;
  width: 200px;
  height: 900px;
  background: Grey;
}

.opiniondiv {
  float: left;
  width: 200px;
  height: 900px;
  background: Red;
}
</style>
</head>
<body>
  <div class='opiniondiv'></div>
  <div class='votediv'></div>
</body>
</html>

The code above is rendered as follows: