-1

I have a parent container, which holds two child containers as follows:

.contentcontainer {
  width: 70%;
  margin: 25px auto;
  color: #61625B;
  text-align: justify;
  border-width: 1px;
  border-color: red;
  border-style: dashed;
}

.imagecontainer {
  width: 45%;
  float: right;
  margin: 50px auto;
  border-width: 1px;
  border-color: blue;
  border-style: dashed;
}

.imagecontainer>img {
  max-width: 100%;
}

.content {
  float: left;
  width: 45%;
  margin: 25px auto;
  border-width: 1px;
  border-color: green;
  border-style: dashed;
}
<div class="contentcontainer">
  <div class="content">
    <h2>"title"</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget sem sit amet turpis aliquam mattis. Sed purus diam, eleifend vitae libero quis, scelerisque pharetra velit. Vestibulum id sem a risus tincidunt dignissim. Pellentesque porttitor a lectus
      eu pellentesque. Quisque imperdiet magna non erat interdum tincidunt. Proin ac sem sem. Fusce dignissim scelerisque pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tristique mauris in urna
      maximus scelerisque. Duis ut mi congue, bibendum ex in, rutrum ante. Sed dignissim diam ut nisi feugiat fermentum. Aenean ante metus, malesuada sit amet turpis in, congue dignissim enim.
    </p>
    <p>
      Nullam a fermentum enim. Vestibulum nec vestibulum massa, quis interdum est. Fusce suscipit iaculis sem id facilisis. Sed imperdiet condimentum tortor at condimentum. Nullam rutrum leo quam, nec egestas risus elementum a. Morbi interdum enim vitae dictum
      hendrerit. Aliquam cursus neque nec purus cursus tincidunt. Nunc feugiat justo eget nunc pretium, non posuere quam gravida. Curabitur dictum erat sit amet molestie cursus. Maecenas et nisi ut turpis condimentum euismod. Fusce placerat varius ornare.
      Nulla a massa ullamcorper, venenatis urna eu, semper neque. Quisque lobortis malesuada feugiat. Fusce quis pharetra felis, a hendrerit urna.
    </p>
  </div>
  <div class="imagecontainer">
    <img src="img/myimg.jpeg" alt="img" />
  </div>

</div>

The borders here are only added for visualization of the positions of the containers. For the most part, this is doing what I want, only problem is: due to the use of float in the child containers the actual height of the parent container is zero. However I want the parent container to span the actual height of the content container and then align the image container vertically to the middle. How can I achieve this?

I have already tried to simply give the .contentcontainer a fixed min-height, however vertical-align: middle on the .imagecontainer still doesn't work. Is this again due to the use of float? How can I put the two container side by side without using float?

JSFiddle of the sample.

Johannes
  • 64,305
  • 18
  • 73
  • 130
Roland Deschain
  • 2,211
  • 19
  • 50
  • https://pageaffairs.com/notebook/containing-floats/, https://teamtreehouse.com/library/clearing-and-containing-floats – CBroe Mar 23 '20 at 14:04
  • 4
    The vertical aligning will probably not work with floats to begin with though. Should really rather use `flexbox` for stuff like this these days. – CBroe Mar 23 '20 at 14:06
  • I guess flexboxes are expained in your links? I'll have a read. And yes, this is a hobby project (=I'm a bloody beginner), I normally do layouts in WPF/Xaml, so have to wrap my head around this stuff atm. – Roland Deschain Mar 23 '20 at 14:07
  • 1
    Float is a really old "out of date" layout technique - choose -or- (Or flexbox layout Or float) - of course, it's better to use Flex (Or CSS GRID). Great resource: her: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction – Ezra Siton Mar 23 '20 at 14:21

1 Answers1

0

Just add these settings on the parent container (and erase the floats):

display: flex;
align-items: center


.contentcontainer {
  width: 70%;
  margin: 25px auto;
  color: #61625B;
  text-align: justify;
  border-width: 1px;
  border-color: red;
  border-style: dashed;
  display: flex;
  align-items: center
}

.imagecontainer {
  width: 45%;
  margin: 50px auto;
  border-width: 1px;
  border-color: blue;
  border-style: dashed;
}

.imagecontainer>img {
  max-width: 100%;
}

.content {
  width: 45%;
  margin: 25px auto;
  border-width: 1px;
  border-color: green;
  border-style: dashed;
}
<div class="contentcontainer">
  <div class="content">
    <h2>"title"</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget sem sit amet turpis aliquam mattis. Sed purus diam, eleifend vitae libero quis, scelerisque pharetra velit. Vestibulum id sem a risus tincidunt dignissim. Pellentesque porttitor a lectus
      eu pellentesque. Quisque imperdiet magna non erat interdum tincidunt. Proin ac sem sem. Fusce dignissim scelerisque pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tristique mauris in urna
      maximus scelerisque. Duis ut mi congue, bibendum ex in, rutrum ante. Sed dignissim diam ut nisi feugiat fermentum. Aenean ante metus, malesuada sit amet turpis in, congue dignissim enim.
    </p>
    <p>
      Nullam a fermentum enim. Vestibulum nec vestibulum massa, quis interdum est. Fusce suscipit iaculis sem id facilisis. Sed imperdiet condimentum tortor at condimentum. Nullam rutrum leo quam, nec egestas risus elementum a. Morbi interdum enim vitae dictum
      hendrerit. Aliquam cursus neque nec purus cursus tincidunt. Nunc feugiat justo eget nunc pretium, non posuere quam gravida. Curabitur dictum erat sit amet molestie cursus. Maecenas et nisi ut turpis condimentum euismod. Fusce placerat varius ornare.
      Nulla a massa ullamcorper, venenatis urna eu, semper neque. Quisque lobortis malesuada feugiat. Fusce quis pharetra felis, a hendrerit urna.
    </p>
  </div>
  <div class="imagecontainer">
    <img src="img/myimg.jpeg" alt="img" />
  </div>

</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130