Placing text beside image without writing code

[rol...@logikalsolutions.com]

All,

I am looking for a clean way to place an image on the left and text on the right without having to use a table or drop into code. Yes, I can drop into code, but am working with several authors who only know word processor for things like bolding and paragraph alignment.

Yes, I know about dropping to code using divisions as mentioned here:
http://stackoverflow.com/questions/9371669/how-to-place-a-text-next-to-the-picture

but that won't really work for them.

The <> encapsulate toolbar button doesn't offer <div>.

I don't see a toolbar button or menu option for

<p style="float: left;">

If I choose Insert->Html5->div I can't really get inside of it in the div tag to insert an image or anything else in the WYSIWYG.

There "should" be a method simple enough for content authors which aren't coders to use this like a regular word processor. Can't really use Libre Office because it doesn't support inserting images from URL.

Appreciate any assistance.

[Greg Chapman]

Hi Roland,

On 28/03/17 17:11, rol...@logikalsolutions.com wrote:
> I am looking for a clean way to place an image on the left and text on
> the right without having to use a table or drop into code.

I always work with the Style Properties Panel open and docked within the
BlueGriffon Window. To achieve what you want, I would...

Having inserted the image, click on it (or more reliably, its <img> tag
on the status bar at the bottom of the window)

Then, turning to the Style Properties Panel, select the option "Apply
styles to: the element through inline styles" and open the "Postion and
Layout" segment and select the "Float Left" icon.

There are a variety of approaches you could take which might make it
appear simpler to a novice BG user.

As the Style Properties Panel can appear intimidating to a non-coder,
you might be able to set up a stylesheet for the page to be edited with
a set of classes for images of various kinds, e.g. "panorama" for
extremely wide aspect-ratio images images intended to fit across the
whole page with styling such as:

img.panorama {
width: 100%;
display: block;
}

img.smallleft {
width: 25%;
float: left;
}

Class setting is easily done from the toolbar drop-down list - as you
might expect given that in-line styling produces so many issues for site
maintenance. Class-setting also has the advantage that you can see that
it has been applied correctly as the status line tag indicates that the
class has been applied.

Of course, you'll want to avoid tables, as in web design they are
reserved for tabular data and should never be used as a page layout
function.

--
Greg Chapman
http://www.gregtutor.co.uk
Still helping users of KompoZer but using BlueGriffon

[Dominik Lenné]

I often use  display: inline-block. 

e.g.

- insert image and div

- select them and insert class name "ib" in top class name field

- go to style panel

- select "use style for all elements of class" and "ib"

- open "position and layout" 

- set "display" to "inline-block"#

- goto "general"

- set "vertical-align" to "top"

As long as the containing element isn't smaller as the sum of the contained, they will end up laterlly positioned.

cheers Dominik