0

I want to have a div containing two columns, of which the left one contains text and the right one an image. The height of the image should be dictated by the length of the text. The image should not exceed 40 % of the viewport's width and it should not exceed the text's height. There is no size given as fixed amount of pixels.

This is what I have come up with so far (I stripped it down here, so for mobile view reasons, the right column has to come first, because in mobile view the image is shown above the text):

The CSS:

.my_list_item_container {
    clear: both;
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.my_list_item_container_flex {
    display: flex;
    flex-direction: column;
}

.my_list_item_left_column {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.my_list_item_right_column {
    float: right;
}

The HTML:

<div class="my_list_item_container my_list_item_container_flex">
    <div class="my_list_item_right_column">
        <img src="example.png">
    </div>
    <div class="my_list_item_left_column">
        Lorem ipsum...
    </div>
</div>

And there is a JS function attached to the event resize event of window. I thought it would be necessary to handle this with JavaScript, but maybe a pure CSS solution is possible (I did not find any, but I am not quite experienced with CSS):

function my_item_resize(event) {
    let containers = document.querySelectorAll(".my_list_item_container")
    for (let container of containers) {
        let leftcol = container.querySelector(".my_list_item_left_column")
        let rightcol = container.querySelector(".my_list_item_right_column")
        container.style.height = leftcol.offsetHeight + "px" 
    }
}

So, it should look like this, the X's should be for the image:

+--------------------+-------+
| Lorem ipsum dolor  | XXXXX |
| sit amet consecutor| XXXXX |
| libit aurum est.   | XXXXX |
+--------------------+-------+

If the image has a narrower ratio, it should scale down to the text height, and not look like this:

+--------------------+-------+
| Lorem ipsum dolor  | XXXXX |
| sit amet consecutor| XXXXX |
| libit aurum est.   | XXXXX |
|                    | XXXXX |
|                    | XXXXX |
+--------------------+-------+
rexkogitans
  • 279
  • 2
  • 17
  • Please provide a drawing/image of the desired result, I'm not sure to fully understand what you want to achieve. Also, how is this supposed to behave when the vp is resized? I don't think any JS is required here. edit: Also I would not mix float and flexbox, I feel flexbox can handle all of this alone. – avia Nov 04 '21 at 12:50
  • @avia I clarified my question, but I think the hint to the duplicate helps. I'll give a try. – rexkogitans Nov 04 '21 at 13:00
  • this one can help you too: https://stackoverflow.com/a/48943583/8620333 – Temani Afif Nov 04 '21 at 13:06
  • @rexkogitans thanks, I would have provided an answer but man do they love closing questions here. sorry – avia Nov 04 '21 at 13:08
  • @avia we don't *love* closing question, we *love* to keep all the answers in the same place. We don't want to have questions having the same answers a billion time. If you have a different answer than the ones provided in the duplicate add them to the duplicate – Temani Afif Nov 04 '21 at 13:50

0 Answers0