<br/> vs <br class="clearBoth" />

At times when I have wanted to add space in some of the tpl_ ...I noticed that adding another "<br class="clearBoth" />" would provide me with the space that I wanted on any given page. For example if I wanted to move a button down or if I wanted to place more space between a description and the free shipping icon etc.

Well I just started thinking that might be a mistake and mess up things, even though every page cosmetically looks okay. Is it okay to be doing that or should I be using <br/> or something totally different.

<br class="clearBoth" /> has to do with CSS and the float property. I suspect it's harmless when there is no preceding floated element.

If you want to understand it better, research the "float" and "clear" keywords in a CSS context

The best way to adjust spacing for page elements is to find the class/id/whatever that apply to the element and edit or add to the stylesheet rules with padding, margins, etc. The possible combinations of tweaks are endless, and we would have to see a specific case live to advise best. You should have Firefox and its Web Developer and/or Firebug extensions for this work. Some other browsers have similar tools.

This avoids widespread PHP file edits which would then have to be copied into all of your new files each time you upgrade.

There is an issue with our product pages on PCs (it's fine on mobile from what I can see.) See this page as an example:
https://www.welsh-lovespoons.co.uk/full-range-of-spoons/two-hearts-in-one-love-spoon-004

On Firefox it shows correctly with the product image on the left, and then the Atrributes block and add to cart on the right with a divider underneath and then the description. From what I can see this is the code that seperates the attributes / Add to Cart section and the description section:

<br class="clearBoth" />  <hr id="product-divider" />

But when using Chrome or Microsoft Edge, the divider and description text are squashed on the right side of the attributes block rather than beneath it. Is there any code I can add to this section so that it shows correctly on all browsers and also importantly doesn't interefere with how it works on mobiles? I am no expert but can make simple changes to files etc and hope this is quite simple. Thanks for any help.

Try putting a <br> after the br with clearboth, i.e.

<br class="clearBoth" /><br><hr id="product-divider" />

Perfect. That's done the trick! Thank you.

Yep we had to do that on the checkout_shipping page in responsive_classic too. Glad you're all set.

Depending on the browser (think Chrome), having the clearBoth on a <br> tag might not do the trick. I normally use the construct <div class="clearBoth"></div> instead.

That is certainly more elegant.

lat9:

Depending on the browser (think Chrome), having the clearBoth on a <br> tag might not do the trick. I normally use the construct <div class="clearBoth"></div> instead.

swguy:

That is certainly more elegant.
Though typically the <div> tag also comes with its own CSS characteristics. Might consider a classed <span> tag instead if there is some unusual visual response/action when using a <div> tag/wrapper.

mc12345678:

Though typically the <div> tag also comes with its own CSS characteristics. Might consider a classed <span> tag instead if there is some unusual visual response/action when using a <div> tag/wrapper.All should keep in mind that clear:both will only work with an element that is next to floated one.

Clear has no effect on in-line blocks.

https://www.w3schools.com/cssref/pr_class_clear.asp