Creating a simple two column layout

Thanks everyone for you all your help and input!

In this particular case the output is PDF and at this stage, the correctness of the approach is less important than the final design (and ease of later mass-manipulation).

I'll have a play with the suggested steps. It's all been really good learning, thanks again.

If you want to achieve something like this:

with "Paragraph 1" always starting at the top of the column, you can do it like this:

<section>
<figure><img alt="RoboHelp Icon" height="128" src="../../assets/images/robhelp-logo.svg" width="131" /></figure>
<p class="top-of-column">Paragraph 1 (Style top-of-colum)</p>
<p>Next paragraph.</p>
<p>Next paragraph.</p>
</section> 

and design the CSS like this:

section {
  column-count: 2;
  column-gap: 10px;
}
p.top-of-column {
  margin-top: 0px;
  break-before: column;
}

The trick is to give the paragraph that should start "top of column" it's own style with the CSS definition "break-before:column".

Note that with the current capabilities of CSS3 it is *not* possible, to define different column-widths. That is, the browse will always balance based on the number of columns.

If this is a mandatory requirement, Columns are not the way to go, but CSS Grid. Or bite the bullet and work with tables (I completely agree with @g_br's information architecture point of view, but HMTL5/CSS3 is just not there yet).

@VivekKumar Could you provide detailed instructions on how to get an image in the left column and the text in the left column? I couldn't see a way to achieve that.

@wascy, yes, please use the Reply button under your original post. The nested replies make the conversation really hard to follow, especially when multiple people jump in at different points.

Regarding your padding, the most likely reason is because the tables, I believe, default to having a vertical alignment of 'middle'. I can't see any way to adjust this in the General section of the Properties panel. So I would recommend you create a table style in your stylesheet and apply the style to your table. It will also mean if you need to change how the table is formatted, you make the changes in one place, and all tables with the style update automatically. 

The only reply button at the top of the page is the one below my original post, is this what you mean?

@VivekKumar thank you; this is for PDF primarily, but I'll also generate CHM files in other projects so the HTML approach will be helpful there!

@Amebr, thank you for testing!
If I create a table with one row and two columns, and drag my image in the left and add text to the right, the image is padded within the cell, so I can't align the image top with the text in the other column.

I created a style with no margins or padding, and tried applying that to the image, the table, the row and the cells one at a time - I guess the table is inheriting from somewhere so my theory was that I'd find a working override somewhere, but that didn't work.

I realise as I type that I used a paragraph style which was probably my mistake; not sure which type would be correct.

Setting the image position to absolute that seemed to fix it, but then I had a border around the image I couldn't find a way to remove. I know it'll be somewhere, just haven't been able to find it yet. I now can't reproduce that, and absolute position no longer fixes it so I've obviously changed something else in my explorations!

Thanks very much for your time helping figure this out.

In terms of the fiddly UI, I did eventually figure out that the down and right facing arrow mouse cursors that show when hovered over a table cell indicate selection of the column or cell, and that Properties > General does tell you where you're working. Selecting the whole table, or a cell, or an image within a cell seems tricky. I expect the selection is layered but I haven't found out how to easily move through them yet - I've ended up with tables, rows, column and/or cells having borders while just trying to remove all.

In Classic, with a table.

In New, I just investigated, and with a table. 😛

There are css methods, but they're complicated in css and there's no UI for it in New UI that I could see.

You can create a table style which will save you a lot of time manually configuring each table (borders, heading row formatting, etc), and will also mean you can change all tables just by changing the style.

If you can describe specific issues that are fiddly we can probably offer suggestions.

[Please use the Reply button AT THE TOP OF THE PAGE to ensure replies are in time order]

Which version of Robohelp are you using? While you may have posted the information previously, it can help people later decide if the information is (still) relevant to them.  Also, I have the memory of a fish and need all the help I can get. 😛