Position Image next to table

  • I have a quick CSS question. I wasn’t sure if it goes here or miscellaneous, but I saw the HTML CSS description in this sections description so I felt it might go here.

    Just a general adjustment, how would I place an image to the right of a table? I have a chart (table) on the left, and trying to position the image to the right of the chart, but the image naturally bumps down to the next line and aligns right.

    I know this has to do with block elements, versus inline (I think), and I tried coding both, and clear left etc. Didn’t seem to work?

    Anyone have a quick fix on this? I appreciate it or any tips. Thanks

    URL below, chart is on the left, bottom photo on the bottom right is the one I’m trying to position. Thanks.

    https://ilovephillyweddings.net/masteritquick2/lessons/

    (temporary domain name of mine)

Viewing 2 replies - 1 through 2 (of 2 total)

  • Quick fix is to assign display inline to the <table>, and prevent auto <p> injected around <img> tag by WP, we do this by bring up the <img> tag next to the closing </table> tag.

    So we will have this

    <table style="display:inline;">

</table><img>

    But the site is responsive thus the right way is to put in extra divs so it works as 2 columns with custom CSS for it to collapse in certain breakpoint.

    Thread Starter Pasnow

    (@pasnow)

    Thanks, didn’t work exactly. Fiddled with it, eventually got

    Div for the table on the left
    <div style="display: inline-block;">

    & Div for the image on the right

    <div style="float: right; padding-right: 20%;">

    May not be ideal. I’ll play with it & may not be ideal but for me suits for now.

    Thanks for your help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Position Image next to table’ is closed to new replies.