13 Apr April 13, 2011

How to use a div tag

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.

Related Posts with Thumbnails

7 thoughts on “How to use a div tag

  1. This is fabulous information Eileen. Thank you so much for taking the time to write it down for our benefit- you rock!

  2. eileen says:

    You are welcome!

  3. Great information, thanks. How did you know I needed it today to edit what I did on Monday?

  4. eileen says:

    Glad this was helpful, post a link so we can see your work!

  5. Don Campbell says:

    Great tip Eileen! You made it seem easy.

  6. Dendy says:

    I’ve been search solutions for this stuff … for last 3 days. Thanks god, there is you kindly post how to do that. Great work Eileen … thanks.

  7. eileen says:

    Thank you so much for taking the time to post! I am happy you found it useful!

Comments are closed.