• Author
  • #1254778


    The page I am editing is

    I am trying to add 3 columns to a page on my blog. I have used formatting link (, however I am having the following problems:

    *if I follow the instructions on the site above, I get 3 columns, but the images and column width are tiny (33%). This is using:
    <div style=”float:left;width:33%;”>
    <div style=”padding-left:10px;”>
    *if I change it to
    <div style=”float:left;width:50%;”>
    <div style=”padding-left:10px;”>
    I only get 2 columns at the width I am happy with.

    Is there a way of getting 3 columns without shrinking the width?

    2. there is a gap at the top of the image in the 1st and 3rd columns, but nothing that would indicate this in the html.

    I hope someone can help! Thanks in advance :)

    The blog I need help with is


    Hi there. The theme you are using has a sidebar that takes up the right third of the content area. Even though you are not displaying content here, it is still showing. If you Edit the page you are displaying the images on, you’ll be able to change to the “Full Width” page template to get the look you’re going for.

    As for the HTML, it does appear that an extra   is causing the text to shift.


    Actually, I just realized it’s not the extra space, but the fact that there is no class=”” attribute on the image for the Phillipa Thomas image try adding class=”size-full alignnone” to the <img> tag for that image.


    One other note, though, you might be able to achieve a similar look without having to hardcode the images by using’s built-in Gallery function.



    Is there a way of getting 3 columns without shrinking the width?

    You seem to be asking the impossible – a blog page isn’t an Escher lithograph!
    What you need to do to display three columns but larger images is edit the page and select the full-width template.

    there is a gap at the top of the image in the 1st and 3rd columns, but nothing that would indicate this in the html.

    That’s not correct; notice that the codes of the top left and right images say class=alignnone while this is missing from the code of the middle image: images aligned none have a default top and bottom margin.

    To make the images uniform, better delete all the class stuff. All of these are superfluous:

    class="size-full wp-image-NN alignnone"
    class="alignnone size-full wp-image-NN"

    You should also delete this (it has no effect when these are the dimensions of the original, and it has no effect inside a column that’s narrower than the specified image width):
    width="240" height="240"

    Other remarks:

    a) Some of the images are white or almost white at the edges, so I would suggest a discreet border around them. Try it and see if you like it. Turn all of these:
    <img ETC ETC
    <img style="border:1px solid #ddd;" ETC ETC

    b) The coding you used requires various improvements in this particular case. So I suggest you forget my formatting tutorial and try my table tutorial instead:


    @justpi, I wouldn’t really use tables for something like this, as it’s not tabular data. Honestly, the easiest way to maintain this, would be to use the built-in image gallery function from WordPress, and link to the external sites on the individual images.



    thanks for the advice. In the end I made the page full width and added the attribute to image and WOOO it looks awesome. Such a small thing to change but looks great now.

    Becca :)



    • I wouldn’t use a table either, but awaywiththespoons isn’t me.
    • The gallery function won’t do as long as they want a heading above each image, and gallery thumbnails cannot link to external sites.


    Gotcha. For some reason I thought you could specify the link on gallery thumbnails, not just standalone images.



    It seems awaywiththespoons left satisfied with the tips that justpi and andrewcpht provided but I was having a little trouble applying the steps. I found this was helpful with a little tweeking.

The topic ‘Columns’ is closed to new replies.