I am currently working on my school's website. The site is laid out with a DIV on the left set up as a menu (called "leftmenu") and a DIV to the right to display the content (called "maincontent"). Clicking a link in leftmenu calls a script which changes the content of "maincontent".
The script currently works as it should except for one small error. The appropriate heading, text and image load for each link, but the formatting between the image and the paragraph is lost. When the page originally loads, the image is set to "float:left" and the paragraph wraps around it to the right. However, when the script runs and changes the contents, the paragraph no longer wraps around the image, but is written below it.
var nov12="News for November 12";
var nov11="News for November 11";
var nov10="News for November 10";
HTML for the links calling the function and maincontent:
<h3 id="newsTitle">School News</h3>
<img id="newsImage" class="newsimagestyle" src="img1.jpg" />
<p id="newsText"><img id="newsImage" class="newsimagestyle" src="" />Select the date from the menu on the left for news posted on that day.</p>
I have also attached the "before.jpg" and "after.jpg" screen captures from the relevant section of the website so you can see what changes are happening to the formatting.
Any help to keep the formatting in the same would be greatly appreciated. Thanks.