Wrap Text Around a Button-CodePudding

I am trying to create a box on a page which is mainly text with a small image at top-left and a button at bottom-right. Wrapping around the image is fine (I've done that dozens of times over the years) but placing the button seems to have beaten me. Whatever I do it always places itself below the text.

.profile-container {
  margin: 1em;
  padding: 1em;
  width: calc(100% - 4em);
  background: #fff;
  border: 1px solid #2c687b
}

.profile img {
  float: left;
  height: 200px;
  width: 150px;
  margin-right: 1em
}

.profile h2 {
  font-family: 'Neuropol', sans-serif;
  font-weight: 300;
  transform: scale(1, 1.3);
  margin-bottom: .5em
}

form {
  float: right;
  margin-left: 1em
}

<div >
  <div >
    <img src="images/paul.jpg" alt="alt" />
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie diam consectetur suscipit tincidunt. Fusce ipsum mauris, bibendum nec massa sed, sodales mollis lacus. Sed dignissim semper neque in semper.</p>
    <p>Praesent lobortis tellus quis eros mollis congue. Nunc vel turpis vel enim vehicula commodo. Duis lectus ante, viverra ut lacinia ac, varius a nunc. Vivamus odio dui, pellentesque faucibus odio et, placerat convallis leo.</p>
    <p>Curabitur et tellus vitae massa tincidunt luctus. Fusce lacus nunc, facilisis id lobortis at, lobortis sed ante. Morbi sagittis eget nisl a lobortis. Donec interdum scelerisque erat ut blandit.</p>
    <form action="reviews.php" method="post" name="reviews">
      <input name="hiddenname" type="hidden" value="hiddenvalue">
      <input type="submit"  value="My Reviews">
    </form>
  </div>
</div>

There's a JSFiddle here: https://jsfiddle.net/yd5v7zrf/

It seems as though the form is always positioned according to its top edge, but I need to position it according to its bottom edge.

CodePudding user response：

Appears to be a collapsed margin issue. Just add display: inline-block; to .profile.

.profile-container {
  margin: 1em;
  padding: 1em;
  width: calc(100% - 4em);
  background: #fff;
  border: 1px solid #2c687b
}

.profile {
  display: inline-block;
}

.profile img {
  float: left;
  height: 200px;
  width: 150px;
  margin-right: 1em
}

.profile h2 {
  font-family: 'Neuropol', sans-serif;
  font-weight: 300;
  transform: scale(1, 1.3);
  margin-bottom: .5em
}

form {
  float: right;
  margin-left: 1em
}

<div >
  <div >
    <img src="images/paul.jpg" alt="alt" />
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie diam consectetur suscipit tincidunt. Fusce ipsum mauris, bibendum nec massa sed, sodales mollis lacus. Sed dignissim semper neque in semper.</p>
    <p>Praesent lobortis tellus quis eros mollis congue. Nunc vel turpis vel enim vehicula commodo. Duis lectus ante, viverra ut lacinia ac, varius a nunc. Vivamus odio dui, pellentesque faucibus odio et, placerat convallis leo.</p>
    <p>Curabitur et tellus vitae massa tincidunt luctus. Fusce lacus nunc, facilisis id lobortis at, lobortis sed ante. Morbi sagittis eget nisl a lobortis. Donec interdum scelerisque erat ut blandit.</p>
    <form action="reviews.php" method="post" name="reviews">
      <input name="hiddenname" type="hidden" value="hiddenvalue">
      <input type="submit"  value="My Reviews">
    </form>
  </div>
</div>

CodePudding user response：

Change the last paragraph to a span: https://jsfiddle.net/57a6gwyk/

<span></span>
<form style="float:right"></form>

Or just make the paragraph display:inline;