side-by-side

[Ecumaster]

Screenshot_1.png (46.87 KiB) Viewed 343 times

Hello,

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

Code: Select all

*[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

[julien_lacour]

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

[Ecumaster]

Works, thanks!