12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

What is the best way to make Columns in Wordpress pages??

by derh
10 replies
  • WEB DESIGN
    • |
I want to showcase 12 product pics (with descriptions underneath)
on my home page.

I need to figure out how to have 3 product pics wide...and 4 products deep.

Example:
XXX
XXX
XXX
XXX

I've tried table html codes and FAILED.

Some one says use <div> which is fine but...

How do I code 3 Columns to fit with the alloted space for Wordpress pages?

Thanks
#columns #colums #make #pages #wordpress
  • Profile picture of the author derh
    nobody knows this????
    Signature

    {{ DiscussionBoard.errors[3054320].message }}
  • Profile picture of the author dialseo
    What you need is a case of Cascading Style Sheets (CSS). Here's an idea of what a 2x2 would look like:

    product product
    product product


    Code:
    <div style="width:500px;">

<div style="width:50%;float:left;">
  <div style="width:50%;border:5px solid 

#fff;background:#ececec;padding:15px;">
    <b>product</b>
  </div>
  <div style="width:50%;border:5px solid 

#fff;background:#ececec;padding:15px;">
    <b>product</b>
  </div>
</div>

<div style="width:50%;float:right;">
  <div style="width:50%;border:5px solid 

#fff;background:#ececec;padding:15px;">
    <b>product</b>
  </div>
  <div style="width:50%;border:5px solid 

#fff;background:#ececec;padding:15px;">
    <b>product</b>
  </div>
</div>

</div>
    This method works with 'inline stylesheets' meaning they're inside (and require use everywhere you want). It's better to use an external stylesheet and call it in your head.
    Also, instead of the above use classes and ids (instead of <div style="..">).

    Try searching Google for more tactics and methods with it, it's very powerful!
    Signature
    A ton of domains for sale!
    {{ DiscussionBoard.errors[3054738].message }}
  • Profile picture of the author Istvan Horvath
    Everybody knows it... they just don't want to tell you (just joking)

    It depends how "adventurous" you are with HTML code. Here is a very elementary code:

    HTML Code:
    <div style="width:33%;border:1px solid #000;float:left;">Fistr row first box</div><div style="width:33%;border:1px;float:left;">first row second box</div><div style="width:33%;border:1px;float:left;">fisrt row third box</div>
<div style="width:33%;border:1px;float:left;clear:both">second row first box</div><div style="width:33%;border:1px;float:left;">second row second box</div><div style="width:33%;border:1px;float:left;">second row third box</div>
<div style="width:33%;border:1px;float:left;clear:both">3rd row 1st box</div><div style="width:33%;border:1px;float:left;">3rd row 2nd box</div><div style="width:33%;border:1px;float:left;">3rd row 3rd box</div>
<div style="width:33%;border:1px;float:left;clear:both">4th row 1st box</div><div style="width:33%;border:1px;float:left;">4th row 2nd box</div><div style="width:33%;border:1px;float:left;">4th row 3rd box</div>
<div style="clear:both"></div>
    It's not a beauty but it works.

    Of course, you could take out ALL the style statements and instead add "classes" to the divs and define the classes in the style.css.

    Further, you can play with margins, padding, borders, background, whatnot...

    Just a sidenote: in this case, when presenting a grid of products I think using tables should be a viable option.

    Hopefully, others are more fluent in using tables for design... and can give you a hand. I always get in a mess with them. Sorry.
    Signature

    {{ DiscussionBoard.errors[3054828].message }}
  • Profile picture of the author Istvan Horvath
    dialseo,

    make sure in WordPress you don't break the codelines! If you use them as presented in your post, i.e. with linebreaks... it will never work!
    Signature

    {{ DiscussionBoard.errors[3054840].message }}
    • Profile picture of the author dialseo
      Originally Posted by Istvan Horvath View Post

      dialseo,

      make sure in WordPress you don't break the codelines! If you use them as presented in your post, i.e. with linebreaks... it will never work!
      That's notepad for you!
      Signature
      A ton of domains for sale!
      {{ DiscussionBoard.errors[3059135].message }}
  • Profile picture of the author derh
    Thanks guys!!!
    Signature

    {{ DiscussionBoard.errors[3055008].message }}
  • Profile picture of the author stevearn
    Visit this ulyssesonline.com/2007/08/01/create-a-2-column-wordpress-page/. you will get an idea.
    {{ DiscussionBoard.errors[3055895].message }}
    • Profile picture of the author TheWebWizz
      You could try using WP Tables Reloaded Plugin. (sorry can´t link it but it´s easy to find) I have used it on a few sites to make tables and it works great. Good support from the plugin creator as well.
      {{ DiscussionBoard.errors[3056121].message }}
  • Profile picture of the author Steve Solem
    Or you could just use WordPress › WP Post Columns « WordPress Plugins
    Signature
    Need Offline Leads? Get them more easily with two great Lead Gen reports and 65 pages of quality PLR PLUS flyers, postcards and other marketing materials. Starting at under $5!
    {{ DiscussionBoard.errors[3058928].message }}
  • Profile picture of the author dialseo
    It's generally better to edit a template than use plugins to accomplish things like this. Plugins need updating and can slow your site loading down.
    Signature
    A ton of domains for sale!
    {{ DiscussionBoard.errors[3059129].message }}

Trending Topics