Forgotten correct Implementation of the float

[codeispoetry]

@Erik_J

Floats must come before content that should go around the float.

@Erik_J

Then the following content must be non floated.

@Erik_J

Now move the picture to come before the slidetext in the html.

@Martyr2

Then if you move the picture element above the slidetext element and turn off the float: right; from your text, you will see it wraps under the image.

Yes, I did it, and it is working.

@Martyr2

Think of the text and image in their own separate box and you can’t have one box wrapping underneath the other box. You can only stack them side-by-side.

@SamA74

You seem to be in the habit of applying flex to everything, whether it’s needed or not. And in this case, it is hindering you.
Use flex only when required, for one, it requires more processing to render, but also it overrides other CSS you may want to use

@SamA74

Before posting anything now(change in behavior as compared to the time when I didn’t know much) I try on my own because I realized that is the only way to learn.

I never ill-conceived the application of flexbox here, I was practicing many sliders in JS for the last two weeks, and the code for this one was taken from there, which already has flex applied, and serving the purpose in those cases. I did not deliberately put the flex in this case, and was aware that this property could be a hindrance.

Additionally,

Before posting the query here I uncommented the flex property on that container. It didn’t make any difference. So I concluded that flex is not a hindrance here, and is not in conflict with float property.

The problem, which was not solved even after eliminating flexbox, was resolved as suggested by @Martyr2 and @Erik_J

1. The one that needs to be floated should come before the one, which should not be floated.

2. The float should not be applied on the part, which doesn’t need to be floated, and vice-versa.

I do not have any practice and understanding of the above two. Neither had I seen a need so far to apply float, but when we encounter situations we explore, find ways, and learn new things. Need-based.

If I had understanding of the above two points, in that case, when I was hit and trying the elimination of flexbox the problem would have addressed then, and the post wouldn’t be created.

Flexbox was accidentally applied, and was not the complete culprit here.

Regarding Flex:
I find that it is very robust, and find an easy and good application in spatial distribution, responsiveness, giving gap between two items(Gap Property, which is many times difficult by applying margins and then handling them separately in different media widths) and especially in aligning items in the center - Horizontal and Vertical.

I do not know GRID so in many situations flex is a swiss knife for me as it accomplishes so many jobs easily and with conceptual clarity now.

In another instance, I was applying a flexbox to a table creation here →

Flex WRAP discussion

No that’s tabular data and should be a table Remember flexbox is not a grid. It does not match columns to columns (unless you fix widths in some ways). Flexbox is more about horizontal alignment but when you explicitly need columns and rows to match then you need CSS grid. However in this case the data is tabular so an html table is the semantic element for the job and you get automatic row and column alignment built in for free In your example you can achieve wh…

But @PaulOB was very supportive. He suggested & also boosted confidence by his words: “Ok, shout if you run into trouble Here is a grid example just for fun.” to apply table instead of Flexbox. I did not had much understanding, practice, and confidence in handling table then, but I was able to learn in few minutes by browsing a few resources online and apply it to good satisfaction then.

Whatever I know I apply that to the best of my potential, knowledge, and awareness at that time.

Thank you so much for taking the time to make a comment on this post, and emphasizing the folly of flexbox, subjectively, in certain situations, but not all. Writing this post has deeply wired the two points that @Martyr2 and @Erik_J and had documented above,and those help in rectifying the mistake because of the poor understanding and application of the floating and wrapping together.