Two columns, auto filled, with an image on top of the second column (magazine-like layout)

Question

I displayed text in a two columns layout, with column-count and column-fill: auto so that it fills completely the first column before going to the second.

I also need to add an illustration at the top right (top of the second column). With a position: fixed, the text won't wrap around the image but will hide underneath it. I tried float combinations with no success.

How would you approach this ? Thanks !

<div class="main">
    <div class="description">
      <div>
        longish text
      </div>

      <figure>
        <img class="illustration"
            src="data:image:{{ p.id }}">
      </figure>

    </div>
  </div>





.main {
  margin-top: 2cm;
  padding: 0 1cm 0cm 1cm;
  column-count: 2;
  column-gap: 2em;
  column-fill: auto;
  text-align: justify;
}

.produit-title {
    color: firebrick;
    padding: 2cm 1cm 0cm 1cm;
}

img.illustration {
  margin-top: 0.1cm;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-height: 5cm;
  max-width: 11cm;
  border: solid 0.04cm;
  border-color: firebrick;
}

expected result:

(edit) the text can be of variable length, but I would like the layout to stay the same. A short text can stop at the first column (role of colum-fill: auto), but the image would still be on the right.

Answer 1

Came upon this stack when trying to find a better solution than the one I went with which was the following. Only advantage to the accepted answer is it doesn't require absolute positioning. Still need to know the height of the image. Note: the image does have to come before the text.

.columns {
  columns: 2;
}
.image {
  background-color: green;
  width: 100px;
  height: 100px;
  column-span: all;
  margin-left: auto;
}
.text {
  margin-top: -100px; /* height of image */
}

<div class="columns">
  <div class="image"></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam erat velit. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Magna eget est lorem ipsum dolor. Feugiat in ante metus dictum at. Platea dictumst quisque sagittis purus sit amet. Nam aliquam sem et tortor. Velit dignissim sodales ut eu sem integer vitae justo eget. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Dapibus ultrices in iaculis nunc. Condimentum id venenatis a condimentum vitae sapien pellentesque. Luctus accumsan tortor posuere ac ut consequat semper. Viverra orci sagittis eu volutpat odio facilisis mauris. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Et netus et malesuada fames ac turpis egestas sed tempus. Sit amet tellus cras adipiscing enim eu turpis egestas. Pretium vulputate sapien nec sagittis aliquam malesuada.

Dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tristique senectus et netus et malesuada fames. Augue lacus viverra vitae congue eu consequat. Lobortis elementum nibh tellus molestie nunc non blandit massa. Dictum at tempor commodo ullamcorper a lacus vestibulum. Risus ultricies tristique nulla aliquet. Nulla pharetra diam sit amet nisl. Sed nisi lacus sed viverra tellus in hac habitasse. Arcu risus quis varius quam quisque id diam vel. Condimentum mattis pellentesque id nibh tortor id. Placerat duis ultricies lacus sed turpis. Quis eleifend quam adipiscing vitae proin sagittis. Ut tristique et egestas quis ipsum suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.
</div>
<div>

Answer 2

Not an easy task at all. You can sort of hack it though, if your images have a fixed height:

div {
  max-width:420px;
  column-count: 2;
  column-gap: 20px;
  position: relative;
  padding-top: 150px;
}

div img {
  position: absolute;
  top: 0;
  right: 0;
  height: 150px;
  width: 200px;
}

div p:first-of-type {
  margin-top: -150px;
}

<div>
<img src="http://via.placeholder.com/200x150px">

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
 </div>             

The trick is to absolute position the image in the container then pull the text back up by setting a positive padding on the container and negative margin on the first paragrash, both equal number to the image height.

This is one of those things that definitely should be easier.

Answer 3

Can't you structure the html like this? Making sure that the image is positioned relatively inside the div?

<div class="main">
    <div class="description">
        <div>
            longish text
            <img class="illustration" src="data:image:{{ p.id }}">
            more text
        </div>
    </div>
</div>

EDIT: If this does not work for you then as I see it you need to either decide where your image is always going to be e.g. always open your article with image followed by text and then you can position as required, or adopt some widely unsupported solution such as regions (https://www.html5rocks.com/en/tutorials/regions/adobe/).