HTML code keeps reformatting in page editor?

Hey all,

I’m attempting to add some HTML to a page. After I save it, the page works great. Yet as soon as I go back and edit the page, it changes the code; thus breaking my page.

Here is the original code:
<div style='width: 500px; height: 440px; background-image: url( https://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/green_500x440_bg.jpg ); background-repeat: no-repeat; background-color: #336633;' ><div style='height: 420px;' ><script src='https://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2.asp?partner=netweather&tStyle=whteYell&logo=0&zipcode=44067&lang=eng&size=13&theme=green&metric=0&target=_self'></script></div><div style='text-align: center; font-family: arial, helvetica, verdana, sans-serif; font-size: 12px; line-height: 20px; color: #FFFFFF;' ><a style='color: #FFFFFF' href='https://www.accuweather.com/us/OH/NORTHFIELD/44067/city-weather-forecast.asp?partner=accuweather&traveler=0' >Weather Forecast</a> | <a style='color: #FFFFFF' href='https://www.accuweather.com/maps-satellite.asp' >Weather Maps</a> | <a style='color: #FFFFFF' href='https://www.accuweather.com/index-radar.asp?partner=accuweather&traveler=0&zipcode=44067' >Weather Radar</a> | <a style='color: #FFFFFF' href='https://hurricane.accuweather.com/hurricane/index.asp' >Hurricane Center</a></div></div>

Here is the code after going back in and editing:

<p style="width: 500px; height: 440px; background-image: url('https://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/green_500x440_bg.jpg'); background-repeat: no-repeat; background-color: #336633">
<p style="height: 420px"><script src="%5C%27https://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2.asp?partner=netweather&amp;tStyle=whteYell&amp;logo=0&amp;zipcode=44067&amp;lang=eng&amp;size=13&amp;theme=green&amp;metric=0&amp;target=_self%5C%27"></script></p>
<p style="text-align: center; font-family: arial,helvetica,verdana,sans-serif; font-size: 12px; line-height: 20px; color: #ffffff"><a href="https://www.accuweather.com/us/OH/NORTHFIELD/44067/city-weather-forecast.asp?partner=accuweather&amp;traveler=0" style="color: #ffffff">Weather Forecast</a> | <a href="https://www.accuweather.com/maps-satellite.asp" style="color: #ffffff">Weather Maps</a> | <a href="https://www.accuweather.com/index-radar.asp?partner=accuweather&amp;traveler=0&amp;zipcode=44067" style="color: #ffffff">Weather Radar</a> | <a href="https://hurricane.accuweather.com/hurricane/index.asp" style="color: #ffffff">Hurricane Center</a></p>

At a quick glance, it appears that all the div tags get removed. Why does WP do this? Is there any easy solution here? I’ve read elsewhere that the WYSIWYG editor is the cause of these types of issues, yet I need that in place to allow for non-savvy computer people to be able to quickly and edit a page without any difficulties.

Any advice is much welcome!

Thank you