Forum Moderators: rogerd & travelin cat

Message Too Old, No Replies

CSS coding for a DIV

         

Gemini23

2:52 pm on Feb 19, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hi all
would anyone know how this can be done?

In posts the following is added after images to give a line-break - otherwise left-aligned images tend to wrap and not give a linespace
<div style="height:1px; clear:both"></div>

The problem is on the newly run out AMP - this DIV/linespace is removed...

suggestion is to do the following.. but exactly HOW to do it?

a custom Sanitizer class that coverts that div into one with a class and then move the style to CSS instead.
Alternatively, replace all these divs in your existing content to have a class attribute.

lucy24

8:22 pm on Feb 19, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



suggestion is to do the following

Took the words right out of my mouth. Inline styles ("div style=blahblah") are for when there is zero possibility that the style will be used more than once on the same site. (I was going to say "on the same page", but if something is used exactly once on each page, you'd go with either a class or an id in the sitewide CSS.) For example, I do it with sandbagged background images where each one is a different size.

So you want something like
div.allclear {height: 1px; clear: both;}
and then pop a
<div class = "allclear">&nbsp;</div>
into your HTML after any image (the &nbsp; isn't officially necessary, but I feel safer if a browser can't choose to ignore attributes on an emty element) ... except can't you achieve the same thing with something like
.postblahblah img:after {content: "<br>";}
? assuming there's some existing classname for the posts.

Gemini23

8:42 pm on Feb 19, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The problem arose some time ago - and seems to have been mentioned on wordpress etc... with no solution offered - that with a left aligned image you cannot add a line-break (that will remain) - and it created a styling problem. On this particular website the image is quite small and stands on its own and the <div style="height:1px; clear:both"></div> adds a permanent space after it... (not saying it is the right way to do it but it seems to work) and is on a number of pages.

The above works fine BUT not on the new AMP rollout...