Skip navigation

Jive Internal Communities

2 Posts authored by: jperiera

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)



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.



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.



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.



When doing Jive and Social Collaboration consulting for teams and organizations I noticed that people encounter issues with graphic sizes as it relates to Jive Documents, Document Viewer Tiles and images in tables. In our cloud instance I have found that Jive does adjust images for the most part. The following seems to work for me, give it a try.



Add a Banner to a Jive Document - 1265 x 250


  • When creating your graphic you can determine the ideal height that works for your presentation.
  • When you want to ensure your images FILL the space and does not get CUT OFF.
  • I have set an image width to try and anticipate possible future changes in the environment.


Try the following:

  1. In HTML view, remove any width and height pixel references.
  2. Add style="width:100%; height:auto;"
  3. If you want to zero out any padding around your image you can remove the default image class. Example; class=" image-1 jive-image" - You can manage padding via an inline style class or the cell padding of a table



  • Will work with Tiles and Widgets
  • Will self adjust in a 1, 2 or 3 column layout - places (document viewer tiles or widgets)
  • Will work with tables ( ensure your tables are not using pixels and are set to 100% and columns a percentage of that. 2 column table for example; table is 100% then each column is set to 50%)


Gif Animation - Demo - Click image to view larger



Mobile View

Filter Blog

By date: By tag: