I need to create a VF detail page which should have fields section in first column and an image in second cloumn as below:

enter image description here

Basically, I need to display the field information in one column and second column should span to the image only.

Please let me know how to accomplish this.


  • 3
    Using pure Visualforce, you simply can't have an image (or any content) that spans multiple rows dynamically. You'll need to use some CSS trickery, JavaScript manipulation, or pure HTML code to achieve this design. This is because page block sections don't allow cells that span multiple rows.
    – sfdcfox
    Jun 29, 2014 at 17:17
  • Thanks for the reply,Will it be possible to write some code snippet. Jun 29, 2014 at 17:46

1 Answer 1


First I would recommend that you use a custom button or link to inject jquery. Have a look on this how you can load custom JS: Changing the color of a custom button

The button/link will have no function. It is just use as a workaround to hook custom scripts in. Later, I probably would make it invisible with jquery.

If you have jquery up and running, use it together with Firebug to figure out what is needed.

You need to learn and understand at least basic concepts of HTML, CSS, jquery and firebug to get it done. But then it's very easy. Also be aware that that this workaround is not officially supported an SFDC may change things unannounced and you will have to fix your code. So you need to know what you are doing. You can't just paste a snippet in which you don't understand. In the last years we have seen only very rare changes to CSS/HTML and such workaround where very stable. But Saleforce plans to overhaul the UI. They keyword here is Aura. I would expect some adaptions in the next 1 or 2 years to become necessary.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .