HTML Element Style How to - Float image to right of within a div with a paragraph








Question

We would like to know how to float image to right of within a div with a paragraph.

Answer


<html>
<head>
<style>
.entry {<!--from   w w  w  .  j  a va 2  s  . c om-->
  width: 600px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 1px;
  border-color: #808080;
  border-width: 2px;
  border-bottom-style: solid;
  position: relative;
  overflow: hidden;
}

.entry p {
  color: white;
  font-weight: bold;
  font-size: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
}

.art {
  width: 80px;
  height: 80px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  float: left;
  overflow: hidden;
}

p {
  float: left;
}
</style>
</head>
<body style="background-color: #EEE;">
  <div class="entry">
    <p>This is a test.</p>
    <img class="art" src="http://www.java2s.com/style/download.png"/>
  </div>
</body>
</html>

The code above is rendered as follows: