Oxygen XML Forum

Posted: **Mon Oct 09, 2023 2:35 pm**

Screenshot_1.png

Hello,

I used side-by-side in css to place pictures next to the text with two following elements:

*[outputclass ~= "side-by-side"] > *[class ~= "topic/p"] {
  display:inline-block;
  width: 40%;
  vertical-align:top;
}  
*[outputclass ~= "side-by-side"] > *[class ~= "topic/fig"] {
  display:inline-block;
  width: 50%;
  vertical-align:top;
  font-size:0pt;
}

However, in places where the picture is next to the numbered paragraph, the number is slightly misplaced.
What could be the reason?

Cheers
Wojtek

Posted: **Mon Oct 09, 2023 4:16 pm**

Hi Wojtek,

You can align the marker and the content by setting the line-height property on the paragraph:

Code: Select all

*[outputclass ~= "side-by-side"] > *[class ~= "topic/p"] {
  display: inline-block;
  width: 40%;
  vertical-align: top;
  line-height: 1.25em;
}
*[outputclass ~= "side-by-side"] > *[class ~= "topic/fig"] {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  font-size: 0pt;
}

Regards,
Julien

Posted: **Tue Oct 10, 2023 5:22 pm**

Works, thanks!

Oxygen XML Forum

side-by-side

side-by-side

Re: side-by-side

Re: side-by-side