HTML Element Style How to - Align div element next to each other

Question

We would like to know how to align div element next to each other.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.main {<!--from   www.j  ava2s  .  co  m-->
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 20px;
  background-color: #EEE;
  border-radius: 50px;
}

.text {
  width: 200px;
  float: left;
  padding-left: 25px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  color: black;
}

.sponsors {
  margin-left: 20px;
  margin-top: 20px;
  position: relative;
  color: white;
}
</style>
</head>
<body>
  <div class="main" style="clear: both;">
    <div class="text">this is a test</div>
    <div class="sponsors">
      <img src="http://www.java2s.com/style/download.png" >
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: