1

I am trying to align images in a div tag so they sit left or right of the text. I am using JCE Editor and if I align images in the image settings the image sits outside of the div tag ??? I am trying to use a span tag without much success.

I will appreciate any advice Thanks John

In the following image you can see the images are spanning the div tags. In the image properties I have aligned right and left which pops them out of the div tag they were originally located in. I have added div tags in an attempt to create space and align the second image down the page furtherenter image description here Below is the code view enter image description here

Below is the end result, similar to what I an looking for but messy, see the


half way through the second image. I am trying to create neat css code to contain images left or right with relevant text. Each image and text to be in its own div tag.
Following is the code I have used.


<div>
<div>Welcome: John Wright</div>
<div style="float: right;"><img src="images/4-sitelogos/e465.png" alt="e465" />
    <hr />
</div>
<div></div>
<div></div>
<div>{yendifplayer videoid=49}
    <hr />
</div>
<h2>The Color Object List</h2>
<p>&nbsp;</p>
<p>This is your roadmap to the design, displaying the colors and objects in the sequence to be stitched.{modal url="images/4-sitelogos/24_bit.png" title="24 bit"}Pass the mouse over image to see variation<img style="margin-right: 30px; float: left;" onmouseover="this.src='images/4_lessons/esdig/color_object_list_exp.png';" onmouseout="this.src='images/4_lessons/esdig/color_object_list.png';" onmouseout="this.src='images/4_lessons/esdig/color_object_list.png';" onmouseover="this.src='images/4_lessons/esdig/color_object_list_exp.png';" src="images/4_lessons/esdig/color_object_list.png" alt="color object list" width="400" height="496" /><br style="clear: right;" />{/modal}Every object can be easily re-sequenced by selecting the color or object in the list and dragging to the new location.</p>
<p>Across the columns the information is</p>
<ul style="list-style-type: disc;">
    <li>The first column displays the color blocks and the thread number as they appear in the palette at the bottom of your work area.</li>
    <li>The second column shows individual objects, where there are more object in the one color block + will appear click to expand the list</li>
    <li>The third column identifies the stitch sequence by number</li>
    <li>The fourth column identifies the tool used to create the object. Notice in block two the curious icons with the question mark indicate that more than one tool was used to create the objects in the group</li>
    <li>The fifth column identifies the stitch type and a simliar comment regarding to the ? mark applies as above</li>
    <li>The sixth column gives the stitch count of each object or group</li>
</ul>
<div>You can see there is a lot of information to be gleaned from this toolbar, one of the reasons I have it displayed while I digitize</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<hr />
<p>Notice the pin and the "x" at the top of the box. The "x" closes the property box and it will need to be reopened from the Docker Toolbar.{modal url="images/4_lessons/esdig/color_object_pin.png" title="color_object_pin"}<img style="margin-left: 25px; float: right;" onmouseover="this.src='images/4_lessons/esdig/color_object_pin_away.png';" onmouseout="this.src='images/4_lessons/esdig/color_object_pin.png';" onmouseout="this.src='images/4_lessons/esdig/color_object_pin.png';" onmouseover="this.src='images/4_lessons/esdig/color_object_pin_away.png';" src="images/4_lessons/esdig/color_object_pin.png" alt="color object pin" width="350" height="486" /><br style="clear: left;" />{/modal}</p>
<p>The pin, if clicked will either be facing down or sideways. The down position locks the toolbar in place and the sideways position caused the box to flyaway to the right, ready to be opened again when required. <br /><br /></p>
<p>&nbsp;</p>
<div><br />
    <hr />
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Objects can be dragged and dropped to resequence in the design form here.</p>
<p>If an object is difficult to select on the work area it is an option to select it from this list and it will be selected on the work area for aeny editing you wish to do.</p>
<hr />
<h4>&nbsp;Related Articles</h4>
<div>{article Object Properties Flyout}[readmore text="Oject Properties"]{/article}</div>

  • We are going to need more specific details to confidently help you. Can you show us a screenshot of the current/undesirable output? Can you scribble on the screenshot to indicate where certain things should be? Can you show us the editor's generated code? Can show us the relevant section of the rendered page's source code? The better your details, the better and faster volunteers can help you. – mickmackusa Oct 14 '18 at 11:29
  • Thanks Mickmackusa, I have added more information. I appreciate your reply – johnwright Oct 14 '18 at 17:54
0

When floating elements left and right, it sometimes helps to clear the floats after each section to keep elements from overlapping.

If I understand the problem correctly, the solution may be to add a div statement like this after each image and the text that goes with it:

<div style="clear: both; line-height: 0;">&nbsp;</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.