unable to find an already existing answer, I am looking for your kind help here. The topic surely is not new, but rather complex in its usage…
a parent container as a paragraph
within: a figure, positioned by float: left
within figure is an image having width and height declared
after the figure, before the closing tag of the paragraph, there is some text (floating righthand of the figure, fine)
The problem is:
I could not find a way to prevent following elements in the page to print into the righthand text for the figure.
How could this be avoided?
Thanks in advance
The code I have until now:
Some figcaption text ...
Some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text
Here comes some other, unrelated text, whatever on the page.<br>
This text is placed **directly** following the explanatory text above.
Before we work on the layout, it would be good to get the sematic HTML stucture right.
This will to some extent help with the layout, as the default styles for elements do lean toward a sensible layout.
To start with, wraping your figure in paragraph tags makes little semantic sense, as it’s an image, not a paragraph of text. Figure itself is a block container suitable for an image. So do you need an extra container?
It does depend on context of the content. You do have some text explanitory text with the image. That would lend itself to the figcaption element, but you have a figcaption with more text. Do need both the figcaption text and the explanitory text?
If you need both, the explanitory text should be a <p> all of its own. If you don’t need both the explanitory text should be in the figcaption.
The other unrelated text should be an other <p> possibly two, replacing the <br> tag.
Thanks a lot SamA74!
The gemneral hints are very useful and valuable for a beginner like me and I seem to understand most of what you explained.
Regarding the direct layout within some tags: I just prefer to do so while developing to move parts to CSS once it is reliable in its function.
(Regarding the forum-functionalities, there are uncertainties - please bear with me…)
But of course is just one of a myriad of options for containing floats but is by far the neatest method these days. Using clear:both works but does not do the same thing as the parent still doesn’t contain the float.
It looks as though you aren’t floating anyway in your latest example as I can see grid rules at play. If you don’t want text to wrap under the figure then you don’t need float anyway.
You’ll need to post your full code again if you want the alignment checked but it looks like a margin discrepancy from the picture you posted.
Try using codepen to show the problem as that makes it easier for us to help
Thanks, could apply a suitable margin to figcaption and now it works fine in this respect!
Regarding your good help here and help the helpers as well, Codepen also is ready
But how to proceed in a preferred way from here?
The desired complete layout of the figure is much more complex and I already have noticed, that only ‘minor’ additions are spoiling the whole layout…
Would it be best to use this same topic (not quite right semantically) or open up another one, more general with a suiting title, to solve particular, but related problems in separate, dedicated topics ???
If you don’t want your text to be invaded by the elements below, you need to put your figure and your text in a div and hide the overflow. This will create a magic barrier that will keep the intruders away from your floated figure.
<div style=“overflow: hidden;”>
<figure style=" float: left; margin-right: 1rem; margin-left: 0; padding: 0; " >
<img style=“” class =“” width =“175” height =“159” src=“” alt=“” loading =“lazy” >
<figcaption> Some figcaption text … </figcaption> </figure> Some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text </div> Here comes some other, unrelated text, whatever on the page.<br>
This text is placed below the explanatory text and the figure.
Really great, I am flabbergasted! Never forgot this word since the first time I heard it
And I must admit that this still is more of a miracle than true comprehension on my side…
Neither myself - it surely is rather clumsy. Anyway I also read your note as a calming confirmation regarding the stability on most browsers and devices. Being very much open for constructive criticism, I would be happy to work on any improvements.
At least, most or all relevant is moved to CSS now.
The Codepen is showing the actual state:
(BTW: I could not find an edit post button to upload smaller images)
The marker is a browser generated pseudo element and you would have a similar problem if you were to try and change the background color of a bullet marker in a standard list.
It doesn’t make a lot of sense to change the background on that arrow anyway as you would have a small coloured square with a black triangle dividing it. It would look odd. (Although as an aside if you use the -webkit-marker version they will indeed let you change the background on webkit browsers and indeed does look odd)
If you meant to change the background of the whole summary then that is syled via the actual summary element.
If indeed you want a custom marker then its best to get rid of the default and create your own which can be anything you like as long as you know how tyo style it.
I’ve changed it in my demo to a circle so you should be able to work out how to change it to your desired outcome.
labouring to hone this snippet for the actual usecase, I have not found a way to relate the width (and height - the browser ought to know the height as well for the case of lazyload) in the layout relative to the vieport width.
Whatever I have tried, unexpected behaviour is happening…
Could you recommend a concise method?