When working it WordPress you may want to insert a table of text or images into your page.  Sometimes images can align in an unexpected way or are “stuck” to one another.  The WordPress image gallery does a great job of aligning and displaying a group of images, but those images aren’t “clickable” or linked to anything.

I just built this page, which has nine images displayed nicely in three rows (screen shot below).  It looks great and by using div codes it was super easy to build.  These steps will guide you through the process:

  • Measure the width of the area you have to work with.  My site is built on the Small Biz Theme with one column on the side, giving me approx 600 pixels width.  (Faststone Capture is a great tool for measuring pixels Windows based designers, MeasureIt is a free Firefox extension.)
  • Do a quick bit of math – I want three columns, so I have 200 pixels width for each column.
  • I edited each image to 150 pixels wide x 150 high, uploaded, tagged and inserted the individual links.  (ResizeIt is a free app for Mac users to help resize a group of images all at once.)
  • Go to Page Editor and Toggle to html view
  • Use this piece of code <div style=”width: 600px; height: 200px;”>
    • This is the full length of the width I have to work with, and the height of the image (150 pixels), plus a a little extra white space at the bottom of the images – this sets up your row and column height, adjust to your project.
  • <div style=”float: left; width: 200px;”>INSERT IMAGE</div>
  • <div style=”float: left; width: 200px;”>INSERT IMAGE</div>
  • <div style=”float: left; width: 200px;”>INSERT IMAGE</div>
  • </div>
  • If you have a second row, begin again, <div style=”width: 600px; height: 200px;”>
  • <div style=”float: left; width: 200px;”>INSERT IMAGE</div>
  • <div style=”float: left; width: 200px;”>INSERT IMAGE</div>
  • <div style=”float: left; width: 200px;”>INSERT IMAGE</div>
  • </div>
  • and so on and so on

Remember each image or piece of text needs to end with a </div> and then the whole group (in this case each row) ends with another </div>

Customized Facebook Pages | MA Web Designer | Social Media Marketing | Eileen Lonergan

If you want to use text, and have the columns hyper-linked to other pages use this

  • <div style=”float: left; width: 200px;”><a href=”link here”>NAME OF LINK</a></div>

How easy was this?  Let me know if you have any questions and if you create a table, post a link in the comments!

This is a new post that I wrote that will show you how to insert a piece of code which will highlight or call attention to a block of text on your WordPress page or blog post, Easy Div Code for Call Out Box | How to Grab Your Readers Attention.

If you need help with your WordPress website, give me a ring, 508.317.7355 or send an email, eileen@eileenlonergan.com.

Eileen Lonergan
I am a WordPress website designer, blogger & partner in ElegantMarketplace.com. I started this blog to keep track of helpful snippets of code and CSS that I found while building sites 400+ posts later it has become much more. Thanks for being here and reading, I appreciate it very much.

Pin It on Pinterest