How is this achieved through HTML and CSS

how can the above be achieved I mean which property some overflow property?
It appears as if the text and image are divided into two columns, but actually, when the text is large just below the image it can take almost up to 100% of the horizontal space.

Please let me know if I am unable to clarify my perspective.

Hi there codeispoetry,

nice image. :rofl:

coothead

2 Likes

Taken from this place.

:wink:

1 Like

The image is probably floated to the right and that means the text will flow doen the left side of the image until it reaches the bottom of the image and then flows full width.

This is normal float behaviour and more or less lesson 1 in CSS :slight_smile:

Note that floated content must come first in the html before the content you want to wrap around it.

2 Likes

Looks like I missed primitive(Primary) lessons and jumped straight forward to flex-box.

1 Like

Floats are old school but still useful for exactly these types of things, :slight_smile:

If you use devtools you will see the float rules for .slide-intro.

1 Like

That’s just what I thought. You seemed to take to advanced and modern css like flex too soon and overlookd the basics that have been around foerever. Now you are thinking these simple things are something even more advanced.

2 Likes

Hi there codeispoetry,

the entire page is dependent upon “JavaScript” for it’s
functionality and when disabled only the text within the
“noscript element” will be displayed. :shifty:

coothead

3 Likes

It may be possible in future that these old schools and ever present things may get obsolete in any future or they will remain there? I think after Flex-box, grid will also be quiet popular and highly applicable in the future.

Yes, Correct.

Things don’t become obsolete purely on account of age. They become obsolete when they no longer have any useful purpose, or that purpose is fulfilled by something better.
Flex and Grid are not replacements for floats, their purposes are entirely different. Some may think differently, but only because historically floats were used for things beyond their intended purpose (multi column layouts) in the absence of other solutions.
You probably would not want to use floats for columns now. But I would still use floats for what there were intended, and that is… errh… floats.

Think of your container element as a glass, your text is water, your image an ice cube. Your ice cube will float at the top to one side of the glass, left or right as you choose, the text is fluid and will displace and flow around the floating element, to the side and beneath. Just remember to add the ice cube first, it floats in the content that follows.

This is the true purpose of floats, to do exactly the thing you are asking about.

As for being afraid to use certain css in case it may be dropped in the future, that’s a silly concern (unless you know something we don’t).
How do you decide which are safe and which are not? Based on age?
You will probably find that the newer tools are just as likely (if not more) to be dropped from the spec than the long-standing and well established foundations that have been extensively used for many years.

4 Likes

Nice.

That’s correct.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.