Text box on page shrinks after adding content

[mindmastery]

Hi Guys,
I have a strange one that you might be a be able to solve for me please... I use the latest version of Dreamweaver CC 21.3 (Windows 10), and have been using some of my existing web pages as templates for creating new ones - but for some reason, after deleting the previous copy (or when adding the new copy), the text box suddenly shrinks down to half the width.

eg. the template page I used is https://mindtraining.net/motivational-quotes/baseball.php (which works fine) but when I change the copy in order to create a new webpage, it suddenly looks like this: https://mindtraining.net/motivational-quotes/racquetball.php

At times, with each single character of copy that I delete (of the old copy), the text box literally begins to inch inward, with each letter I delete.   Fascinating, but annoying : )    If any of you great codesters have some thoughts, would be extremely appreciative. 

Many thanks,

Craig T 

[osgood_]

Well your code is all messed up, that's why it is freaking out. The whole section (see below in bold) in the page that isn't working is wrecked, its obviously been on a good night out.  I cant quite tell whats going on but if you close the <span> tag as indicated in red and get rid of the redundant closing </div> tag indicated in red then I guess the page will work as you are expecting.

Incidentally as an aside note - a <div> </div> is not supposed to be wrapped in a <span> </span> tag. There are other errors in the page and the use of deprecated code are not helping you to maintain this website.

<section id="blog" class="container">

<span class="social-icons">

<div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a> <a class="addthis_counter addthis_pill_style"></a></div>

</span>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=mindmastery"></script> <!-- AddThis Button END -->

<div id="breadcrumbs"><span style="font-size: 14px"><a href="https://mindtraining.net/index.php">Home </a></span> <span style="font-size: 14px"><strong>&gt;</strong> <a href="https://mindtraining.net/motivational-quotes/index.php">Motivational Quotes</a></span>

<strong style="font-size: 14px">&gt; Racquetball

</strong><br>
</div>

</div>

<div class="blog">

[mindmastery]

Thanks for your thoughts Osgood.  I couldnt find that first </span> you mentioned in this code, though noticed I had the double <div> on a lot of the pages.  So far no change, but from the w3 valigator I can see there are a lot of errors on the page so I will need to go and sift through them all.  Cheers. 

[osgood_]

The closing span tag indicated in red is not currently in your code. I put it there in red and larger than the rest of the code to  show you where it should be as with the redundant closing div tag which should not be there...............but obviously my attempt to explain that has clearly failed.

[Nancy OShea · Accepted solution]

39 HTML5 Errors and Warnings on racquetball page alone.  See details below.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fmindtraining.net%2Fmotivational-quotes%2Fracquetball....

1. Open your Template.dwt file and validate code. 

https://validator.w3.org/

2. Fix all reported errors.  Save and populate changes to child pages. Close Template.

3. Validate child page. Fix reported errors and save. 

4. Repeat for each child page in your site. 

5. Republish your entire site to server.

That should get you back on track.

[mindmastery]

Many thanks Nancy, much appreciated.