How Do I Wrap Text Around and Below an Image?

[Galeodan]

I am trying to wrap text around an image so that it wraps next to the image and below the image. This is especially desired for responsiveness \ resizing pages. Here is how one of the standard temaplates appears on a wide screen:

When the page shrinks, it changes to this:

But, as the screen shrinks, I want the text to wrap beside AND across, under the image:

I cannot find an example of this behavious in any of the templates. Surely it can be done?

Any help appreciated.

Sean

[osgood_]

Well it doesnt really help anyone, not that url anyway, as there is no explanation or logical reason as to why a tag should be named 'aside' and not just 'side' as in 'header' its not 'aheader' 

My point here is that whilst you can just accept it and cant change it there is reason to question it and debate if there is room for improvement which would make more sense. Those users which descriptive tags are best placed to help would benefit by allowing a better overall description of what they are viewing to build up in their mind.

Maybe you completely just missed the point, having not read the relative responses which would let you respond with some meaningful input but thanks anyway for your time.

[Galeodan]

I saw this posted somewhere and thought that a full listing might help someone.

...

By @BenPleysier

Thanks Ben - Such lists will be of use to me as long as I am learning this stuff - Which I think will be a long time:). I have seen several such lists, but have yet to find something more like a table that also lists the relevant attributes for each - Perhap's not that useful, or practical. I would also like to be aware of which tags are purely semantic and which, like <figure>, <figcaption> etc. actually change the size, margin etc. of the elements you are putting into it. Would save a lot of time figuring out why things don't turn out the way I anticipate.

[osgood_]

I would also like to be aware of which tags are purely semantic and which, like <figure>, <figcaption> etc. actually change the size, margin etc. of the elements you are putting into it. Would save a lot of time figuring out why things don't turn out the way I anticipate.

By @Galeodan

The general rule of thumb is if you experience some 'unusual' spacing, repositioning, shifting its possibly likely down to some default margin or padding on an html element. In that case you can just try to zero out those attributes.

Some devs have a reset css file attached or block of code in their main css file to stop that, which zeros out all the default styling on the html tags, or certain tags they choose. Its a personal approach, I prefer not to do that because in some instances the default styling maybe acceptable and you would have to put it back for that particular element.

From years in this business I can tell you its all about trial and error, mostly. Yes you get more skilled as you progress and generally have a very good idea of what is going to happen but even the most expert devs have issues in rembering everything, its impossible. The key is they have enough knowledge to eventaully see the error of their ways and put it right.

Dont be fooled by any smooth looking video tutorials. The dev has gone through the project prior to copying the code from their other screen as you watch. If you want to get a serious insight into how it really is then find a dev whos brave enough to put his backside out there, doing a live stream, can be quite funny at times and of course enlightening.

[B i r n o u]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#image_and_multimedia

By @BenPleysier

to complete the MDN list, I often like to digg this one too... https://html.spec.whatwg.org/#toc-semantics

[osgood_]

So what meaning does <aside> have on a mobile device? If you look up the definition of 'aside' it clearly states the meaning as 'to one side' - I guess as in the phrase 'push aside'.

However on a mobile device it will most likely find its way 'beneath', rather than to one side. <aside> has no descriptive meaning at all like 'header', 'footer' which will always be above or below on desktop AND mobile so retain some logic.

Maybe 'aside' should have been 'apart' or 'unattached' which would have been more descriptive as its generally used for content which should be unrelated to the main content and can be used within content, which would not be aside of content.........hummmm

Infact some sources suggest it should be used within content then contradict themselves by depicting it as its own entity as a sidebar, which is not within content.

Its no wonder that hardy any developer uses 'aside' in video tutorials or more on point the 'picture' or 'figure' tag, because they are somewhat misleading or unclear.

Throwing out urls doesnt really address the issue, it merely says these are the tags which we all know about. The conversation here is about tags that are not clear as to their usages in terms of the name given t them.

Why not a photo tag:

<photo>

<photocaption></photocaption>

</photo>

Why not a diagram tag:

<diagram>

<diagramcaption></diagramcaption>

</diagram>

a <figure> tag is not that descriptive of the content and includes all image formats whether a photograph or diagram.

[B i r n o u]

So what meaning does <aside> have on a mobile device? If you look up the definition of 'aside' it clearly states the meaning as 'to one side' - I guess as in the phrase 'push aside'.

However on a mobile device it will most likely find its way 'beneath', rather than to one side. <aside> has no descriptive meaning at all like 'header', 'footer' which will always be above or below on desktop AND mobile so retain some logic.

Maybe 'aside' should have been 'apart' or 'unattached' which would have been more descriptive as its generally used for content which should be unrelated to the main content and can be used within content, which would not be aside of content.........hummmm

By @osgood_

that's why I like to read the w3c documents... everything is clearly explained... so you don't have to imagine what it could have been... it's just as it is detailed.... https://html.spec.whatwg.org/#the-aside-element

[osgood_]

that's why I like to read the w3c documents... everything is clearly explained... so you don't have to imagine what it could have been... it's just as it is detailed.... https://html.spec.whatwg.org/#the-aside-element

By @B i r n o u

But it has no meaning in a mobile device, that's the point, not even in the description you linked to. It wouldnt be to the side as the definition of the word in the dictionary expresses predominately. It doesnt even mean anything in the examples shown as the aside is presumably 'beneath' other content, assuming there is no css styling to be applied.

In my opinion the spec has used the wrong name just as they have used the wrong name to group all images under the figure tag. You're just ready to roll-over and accept what you are told and not challenge the concept and naming convention. Hey, Ho no progress was made that way.

It could'nt  be any clearer than:

https://www.vocabulary.com/dictionary/aside 

If something's aside, it's not in the middle of things — it's off to the side, either literally or figuratively, as with the papers and books you push aside on the couch, to make room to sit.

In the examples at the url you link to how is the use of aside NOT in the middle of other html?????? and how in a mobile device would aside NOT be in the middle of other html or beneath other html?????

[B i r n o u]

But it has no meaning in a mobile device, that's the point, not even in the description you linked to. It wouldnt be to the side as the definition of the word in the dictionary expresses predominately.

By @osgood_

You're kidding... ;).... so funny... I read the entire definition specified by the link you gave... and it is so right.... When you ignore your conscience, you put aside your better instincts.... does that mean that the reptilian brain is then placed outside the HEAD... right physically next to the BODY tag... ;)... it's so funny, I never thought of it that way... but maybe in French we are so used to what is called the figurative sense of things, and not the literal, purely down-to-earth sense...

Led Zeppelin, was singing a beautiful song which said... "sometimes words have two meanings"... and by the way... just for the fun... https://www.youtube.com/watch?v=2u-PjvRyr0I

[osgood_]

If you find it that confusing then it proves a point.....................stairway to heaven should never be sung like that. What we call in the UK 'Murdered' but maybe that wont translate so well given its not used in the correct context to describe a poor reproduction of a classic song. Seems catching if you ask me.....using innapropriate words to describe something.

[B i r n o u]

I guess we are about the same age... I've been listening to Led Zeppelin since I was 10 years old, and they were just starting out, and this version with the chorus that goes up at the end is amazing, Jason taps in his father's grooves, Jimmy wants to join in the magic that is happening before his eyes, John keeps joining Robert who is moved to tears. What emotions, in my opinion nobody killed this song that day, on the contrary .... what a homage

[osgood_]

Nothing can beat seeing Led Zep perform live at Knebworth.............now that was a night to remember, some 40+ years ago. Personally l think cover versions never really do justice to the originals.......once in while but not this one in my opinion.

[osgood_]

Ha! 62 years young and head banging away to Zep at 1.20 in the morning.......Rock and Roll..........turn the speakers up to 11.

[Nancy OShea]

What we call in the UK 'Murdered' but maybe that wont translate so well given its not used in the correct context to describe a poor reproduction of a classic song.

=========

In US slang, when someone "kills it" it's regarded as wonderful!  But when they "murder it" it's downright offensive and best forgotten -- eg The Muppets performing Queen's Bohemian Rhapsody. 😞

English is not an easy language, that's for sure.

[B i r n o u · Accepted solution]

yes... you're so right... I always loved this one https://www.youtube.com/watch?v=Q5KKVC3JyJA... well, not in the same way than the previous link about a moment of pure emotion