HTML / Wordpress problem

[think2]

I have a problem with a wordpress website I'm helping to add the content to. We have three small images shown side by side, left aligned, the third of which is shown below starting with <div> and ending with </div>. The problem is that to get the next section to start on the line below the images instead of to the right of them, we have to have the six &nbsp; you can see below and What You See (in edit mode) Is Not What You Get (in "live mode") i.e. in edit mode, to get the <h2>Notices</h2> to appear in the right place in live mode, it needs to be to the right of the images. Is there any way to force the <h2>Notices</h2> to start on the next line below the three images so that what you see in edit mode looks sensible and matches what you get in "live mode". The site is using wordpress 3.1.2 rather than the latest 3.4.2.

<div id="attachment_727" class="wp-caption alignleft" style="width: 160px"><a href="http://www.abcd.org/wp-content/uploads/2011/12/DSC086561.jpg"><img class="size-thumbnail wp-image-727 " title="SONY DSC" src="http://www.abcd.org/wp-content/uploads/2011/12/DSC086561-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Clubrooms 1994</p></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Notices</h2>

 

[think2]

This is what the HTML looks like at edit time

[caption id="attachment_700" align="alignleft" width="150" caption="xyz, Oct 18"]<a href="http://www.abcd.org/wp-content/uploads/2012/10/Concrete-slab-Oct18-21.jpg"><img class="size-thumbnail wp-image-700 " style="margin: 0px;" title="Concrete slab Oct 18 2012" src="http://www.abcd.org/wp-content/uploads/2012/10/DSC0123-150x150.jpg" alt="" width="150" height="150" /></a>[/caption]

[caption id="attachment_614" align="alignleft" width="150" caption="xyz, Sept 18"]<a href="http://www.abcd.org/wp-content/uploads/2011/12/DSC08608.jpg"><img class="size-thumbnail wp-image-614 " style="margin: 0px;" title="Sept 18, 2012" src="http://www.abcd.org/wp-content/uploads/2011/12/DSC08608-150x150.jpg" alt="" width="150" height="150" /></a>[/caption]

[caption id="attachment_727" align="alignleft" width="150" caption="xyz, Oct 30"]<a href="http://www.abcd.org/wp-content/uploads/2011/12/DSC086561.jpg"><img class="size-thumbnail wp-image-727 " title="SONY DSC" src="http://www.abcd.org/wp-content/uploads/2011/12/DSC086561-150x150.jpg" alt="" width="150" height="150" /></a>[/caption]

&nbsp;

&nbsp;

 

[Tweak155]

I believe the really old solution to this is:

<div style="clear:both;"></div>

Put that in place of your &nbsp;'s.

 

[think2]

I believe the really old solution to this is:

<div style="clear:both;"></div>

Put that in place of your &nbsp;'s.

That works! Thanks a lot.

 

[Markbnj]

I believe the really old solution to this is:

<div style="clear:both;"></div>

Put that in place of your &nbsp;'s.

Is there a really new solution to it? It would be nice not to have all those useless divs.

 

[think2]

Does anyone know of a content management system that doesn't have hassles with user editing like this. Joomla seems to use tinymce as well. I see tinymce gets updated fairly often so maybe some of these issues have been improved on.

 

[Markbnj]

Does anyone know of a content management system that doesn't have hassles with user editing like this. Joomla seems to use tinymce as well. I see tinymce gets updated fairly often so maybe some of these issues have been improved on.

What do you mean by "hassles with user editing?" They all handle text quite well using various editor plugins. But you're trying to insert custom markup. When your markup gets rendered it's either well-formed and has the correct styles applied or it doesn't. No content management system is going to figure that our for you.

 

[think2]

What do you mean by "hassles with user editing?" They all handle text quite well using various editor plugins. But you're trying to insert custom markup. When your markup gets rendered it's either well-formed and has the correct styles applied or it doesn't. No content management system is going to figure that our for you.

Sorry for the late reply. A simple example is to have a blank line between items in a bulleted list. I had to go into the html and insert a <br>. It's also difficult to get images where you want them.

I've just found ckeditor http://ckeditor.com/ so I'm going to give that a try.