Workaround - (Depending on your version and implementation of Jive.) When encountering an image float issue consider the following to help improve your content presentations. There are pros and cons to each and this simply documents a few simple steps you can try on your own.


 

>> Use ONLY - If your editor does NOT have image float enabled or is not available. <<

 

 

Option 1: Image and Text - Only

Use this for Jive documents or blogs. Anytime you want to 'float' an image left or right of your text. Need something to float right, then select Align Right instead.

 

Step 1: Add your text

Step 2: Add your image, just before the first letter of your text

Step 3: Select the text, then Shift + Click the image to select the text and image

Step 4: In the editor tool set, click Align Left

Step 5: In the editor tool set, click Source Code <html> locate your image an add;  style="margin:20px;" (this will provide some space between your image and text)

Step 6: In the editor tool set, click Source Code <html> locate the end of your content section and add a clear:both style. (will keep other content from bunching up)

 

Frustrated

This Example

A simple example of how this workaround will work and display. May not work in all situations and may impact how people view the content in streams, mobile or email.

 

This suggested work around may also be impacted upon a new Jive release or if the editor UI gets updated, i.e. you may need to revisit your content and fix it.

 

Breaks - in typical html after an float has been added a clear float would be needed to ensure content sections are clearly separated.

 

A simple <br style="clear: both;" /> may work. No need to keep hitting return to create space.

 

 

Option 2: Image and Text - Table

Use this for Jive documents or blogs. Anytime you want to 'float' an image left or right of your text. No floats needed.

 

Step 1: In the editor tool set, click Table. Create a 2 column table.

Step 2: Make sure your table is set to 100% in the Table Properties and that your columns are set to 25% / 75% in the column properties. (this is to help ensure your layout scales and is not cut off when viewed in smaller screen sizes.

Step 3: Add your image in the first cell, THEN add your text in the second cell. In the cell property click align top.

Step 4: In the editor tool set, click Source Code <html> and add; style="width:100%; height:auto;" (this will ensure your image scales to different screen sizes and if displayed in a doc viewer tile)

Step 5: In the Table Properties, set border to Zero 0 OR border color to white #ffffff

 

DO NOT: Click on image to resize OR click on a column to adjust. This will set the table back to pixels, thus breaking the auto resizing when viewing in other screen sizes and the document viewer. This must remain percentage based.

 

Frustrated

This Example

Using a table might be another way to present your content and images. The drawback is understanding and dealing with a few 'quirks' with the table itself, depending on your editor.

 

As stated above this option may obsolete once the issue is fixed, however you can use this method anytime if it is of value to you.

 


Overall

You determine how to best represent your content. Knowing when to put just the right amount of text in relationship to the image is your choice. This just illustrates some options you may want to implement if you are struggling with layout issues. Many can recognize that the float issue should simply be fixed, rather than providing workarounds. However until the issue can be corrected and properly addressed the above suggestions may work for you - we all use various Jive instances and may experience the same or similar issues.