I'm not a fan of liquid layouts, so I made some adjustments to make the OxygenXML webhelp output a fixed width.
<code>.conbody,
.taskbody,
.refbody,
.body,
p.shortdesc,
.title,
.ullinks,
.glossdef
{
max-width:800px;
}
</code>Some of those other elements, such as title and p.shortdesc, appear before the body. They don't seem to be contained within anything, though I could have overlooked something.
I also apply a max-width property to images:
<code>.conbody img,
.taskbody img,
.refbody img{
max-width:600px;
}
</code>Note also that when you apply a fixed width to your content, the code in your code block elements may get cut off. Since codeblock elements are contained within stepxmp and info, which are contained within step, you can't really get around their parent containers.
Instead, to handle code block content from getting cut off, you can add this:
<code> .codeblock {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</code>Sponsored content
Special shoutout to CSS Tricks for this tip on wrapping content inside the pre tag.