How to avoid flex in the code below?

Question

I was trying to make a UI. Initially, I was using float (and some positioning techniques) to reproduce the following design (the first half, which makes use of the flex properties), but I couldn't. So I researched on Internet, and I ended up learning flex. I think that's CSS3 (I don't go in that version of CSS in SoloLearn yet), but I wanna know how I would have made that design if I wouldn't know flex).

Notes:
* The image is positioned to the edge of the right side and is aligned vertically in the middle.
* If the header is to long to fit in the container without altering the width of the page, it has to be able to scroll but without interfering with the image limits.
* The total width of the container is undefined (it adapts to devices screen width), but the image has known dimensions.

Hope your ideas! 😃

https://code.sololearn.com/W6ngthDq0TB1/?ref=app

Answer 1

Try
div.float>h1 {
display: inline;
max-width: calc(100% - 37px - 10px);
}

https://code.sololearn.com/WdhwCWrB3wl7/?ref=app

And we can't align float block with vertical-align, use inline-block instead.

Answer 2

Thanks Calviղ. I added what you say for the header and started playing around with the code. What a pity that float cannot be used while aligning vertically to achieve my requirements.

This is the most similar interface that could be achieved:

https://code.sololearn.com/WNACARV4c7AP/?ref=app

P.D. Why is there an extra space at the bottom of the floats div? I measured all elements inside it and nothing appears be wrong.

Answer 3

Marfik Em Float div always align div to top, so extra space at the bottom of the img formed if the img is not high enough.