Forgotten correct Implementation of the float

Hi there, Here is the live demo link.
I used to implement float property 3Ys back, but I have forgotten certain aspects now.

I still believe that the empty space below the image can be occupied by the content just below it. where am I faltering?

.spaceshare {
	display: flex;
	padding: 20px;
}
.spaceshare .slidetext {
	float: right;
	flex: 1 0 70%;
}
.spaceshare .picture {
	float: right;
	clear: both;						
	max-width: 500px;
}

Hi,
Floats must come before content that should go around the float.
Then the following content must be non floated.
Last, the flexbox display and float is not working together and the flex parent is making all its children flex items.

.spaceshare {
/*	display: flex; */
	padding: 20px;
}
.spaceshare .picture {
	float: right;
	clear: both;						
	max-width: 500px;
}
.spaceshare .slidetext {
/*	float: right; */
	flex: 1 0 70%; /* not effective as it's no longer a flex item */
}

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

2 Likes

Yeah mixing float and flex box is not something I would really advise. The reason you are seeing it not wrapping under is because you have the picture and text as flex items of your flexbox row. So they are essentially seen as two different items that have no relation to one another. 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.

If you take off the display: flex; from your .spaceshare class, this will treat the elements as not being flex items. 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.

4 Likes

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. In this case it is overriding the float. You can’t float a flex item, because flex is controlling its position and relationship with its sibling elements. If flex behaviour is not what you want, don’t apply flex, it’s that simple.
For the most part, natural document flow is the simplest and easiest way to achieve a fluid, responsive design. Flex is a special property for use in specific circumstances. It is not an “all occasions” property or RWD silver bullet.

4 Likes

Yes, I did it, and it is working.

@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 →

But @PaulOB was very supportive. He suggested & also boosted confidence by his words: “Ok, shout if you run into trouble :slight_smile: 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.

1 Like