Markup syntax help: Display multiline text beside tall image

support
1

Sorry … this is very much a newbie question. What is the markup syntax to place Text and and Image side-by-side? i.e. like a html table with one row and 2 columns -> col 1 is the text (which will wrap to multi-lines), col 2 is the image (which is tall and spans say 5 lines)

I have tried a few things with no success. I did try using including a html table … but that changed the look of the look as e.g. the table is indented and the text in tables looks a little different. Thanks a lot!

2

For those interested I solved as follows:

  1. Added a custom css file (path: project\stylesheets\custom.css) thus:
section {
    margin: auto;
    padding-top: 10px;
}
div#sectionleft {
    float: left;
    margin-right: 10px;
}
div#sectionright {
    margin: auto;
}
  1. Made sure my theme included this by editing config.toml and setting [params] custom_css = [“stylesheets/custom.css”] (note: not all themes support this)
  2. Added a custom layout file (project\layouts\shortcodes\imagewithtext.html) thus:
<section>
    <div id="sectionleft"><img src='{{ .Get "img" }}'></div>
    <div id="sectionright">{{ .Get "text" }}</div>
</section>
  1. Used this shortcode, e.g.:

{{< imagewithtext img=“/images/my_img.png” text=“Here is the good oil” >}}