Title: Equal columns? How???
Last modified: August 19, 2016

---

# Equal columns? How???

 *  [dicalva](https://wordpress.org/support/users/dicalva/)
 * (@dicalva)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/equal-columns-how/)
 * I used [wp theme generator](http://www.yvoschaap.com/wpthemegen/) to create a
   theme from scratch and now I have a problem with my three columns not being equal
   and only adapting to the quantity of text in it.
    To resolve my problem at the
   moment I am puting tonns of  in it (not funny)… This link will give you an idea
   of my problem: [http://www.refernet.lu/?page_id=9](http://www.refernet.lu/?page_id=9)
 * Any ideas?
    Thank you in advance 😉

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [Connor Montgomery](https://wordpress.org/support/users/c_t_montgomery/)
 * (@c_t_montgomery)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775409)
 * Hi dicalva,
 * If you give your center column CSS styles of `display:block; height:xxxpx` where
   you specify the height to be the same as the other two columns (I am on a public
   computer w/o Firebug right now, so I apologize I cannot tell you exactly the 
   height you will need).
 * I hope that helps! Let me know if it doesn’t and I will take a much closer look
   and resolve the problem when I get home.
 * Best,
    Connor
 *  Thread Starter [dicalva](https://wordpress.org/support/users/dicalva/)
 * (@dicalva)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775419)
 * Thank you so much Connor but the problem is the other columns are not equal as
   well 🙁 I just made them look the same by putting in some 
    as well … the thing
   is, the right column is only dedicated to rss feeds so if one day there are more(
   or less) the column will satrt moving … So in fact what I am looking for is, 
   that that all columns adapt to the longest collumn. Thank you for your precious
   Help 😉
 *  [Connor Montgomery](https://wordpress.org/support/users/c_t_montgomery/)
 * (@c_t_montgomery)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775423)
 * No worries! Sorry about that – I misunderstood the question!
 * Check out this link – [Equal heights using jQuery](http://filamentgroup.com/lab/setting_equal_heights_with_jquery/).
   Now, I don’t know if you are familiar with javascript or comfortable modifying
   any .php or .js files, but I’ll walk you through how to do it. Hopefully it works
   like a charm!
 * 1 – Navigate to your theme’s directory. Open up header.php
 * 2 – Create a file that is called plugins.js and put it inside the /js folder 
   inside of /wp-includes.
 * 3 – Open up that plugins.js file and paste the following code:
 *     ```
       /*--------------------------------------------------------------------
        * JQuery Plugin: "EqualHeights"
        * by:	Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
        *
        * Copyright (c) 2008 Filament Group
        * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
        *
        * Description: Compares the heights or widths of the top-level children of a provided element
        		and sets their min-height to the tallest height (or width to widest width). Sets in em units
        		by default if pxToEm() method is available.
        * Dependencies: jQuery library, pxToEm method	(article:
       		http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
        * Usage Example: $(element).equalHeights();
         		Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
        * Version: 2.0, 08.01.2008
       --------------------------------------------------------------------*/
   
       $.fn.equalHeights = function(px) {
       	$(this).each(function(){
       		var currentTallest = 0;
       		$(this).children().each(function(i){
       			if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
       		});
       		if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
       		// for ie6, set height since min-height isn't supported
       		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
       		$(this).children().css({'min-height': currentTallest});
       	});
       	return this;
       };
       ```
   
 * 4 – After you see the `<script src="http://www.refernet.lu/wp-includes/js/jquery/
   jquery.js?ver=1.4.2" type="text/javascript"></script>`, paste the following: `
   <script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.js></
   script>`
 * 5 – Directly after that piece of code (or in the footer.php file… really, just
   anywhere other than above where you included plugin.js), insert the following:
   `
   <script type="text/js">$('#bd').equalHeights();</script>`
 * That should fix everything, and hopefully it does! Let me know if you have any
   questions or can’t get it to work! I tried to be thorough…
 *  Thread Starter [dicalva](https://wordpress.org/support/users/dicalva/)
 * (@dicalva)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775446)
 * Hi Connor.
    You cannot imagine my joy when I saw your reply today! I am so thankful!!!
   Unfortunately I am in a hurry and leaving for the weekend and only coming back
   on sunday evening … so, I will surely not forget you and will give it a try monday
   morning and OF COURSE let you know wif it worked! It sounds good, thank you again…
   and I’ll write my report on it on Monday. Meanwhile you have a great weekend!!!!
   Diana 🙂
 *  Thread Starter [dicalva](https://wordpress.org/support/users/dicalva/)
 * (@dicalva)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775474)
 * Hi Connor,
    I created the plugins.js file and put it on the right place. Now 
   I have a question:
 * Do I have to put
    <script src=”[http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243](http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243);
   type=”text/javascript”></script>
 * AND this
 * <script type=”text/js” src=”[http://www.refernet.lu/wp-includes/js/plugin.js></script&gt](http://www.refernet.lu/wp-includes/js/plugin.js></script&gt);
 * in the header php? Because I don’t see the first script: <script src=”[http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243](http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243);
   type=”text/javascript”></script> anywhere…
 * and after this I have to paste this script in the footer for example?
    <script
   type=”text/js”>$(‘#bd’).equalHeights();</script>
 * Those scripts have to be pasted before the <head> section? of a document?
 *  [Connor Montgomery](https://wordpress.org/support/users/c_t_montgomery/)
 * (@c_t_montgomery)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775478)
 * Hi Diana,
 * You do not need to put `<script src="http://www.refernet.lu/wp-includes/js/jquery/
   jquery.js?ver=1.4.2" type="text/javascript"></script>` – you actually already
   have included that! However, you will need to put `<script type="text/js" src
   ="http://www.refernet.lu/wp-includes/js/plugin.js></script>`. You just have to
   make sure that second chunk of code is AFTER the first one (where you reference
   jQuery) in the header.php file. You dont see the first script because you are
   probably using a function (like `<?php wp_enqueue_script("jquery"); ?>`) to load
   it.
 * After putting that second chunk of code (plugin.js), you will want to place `
   <script type="text/js">$('#bd').equalHeights();</script>`.
 * All of that is to go IN the `<head>` section of your header.php file. Not after.
 * Hope that helps!
 * Best,
    Connor _[sig moderated as per the [Forum Rules](http://codex.wordpress.org/Forum_Welcome)]_
 *  Thread Starter [dicalva](https://wordpress.org/support/users/dicalva/)
 * (@dicalva)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775481)
 * Ok, let me confirm where I put what type of code:
 * I created the plugins.js and put it inside the /js folder inside of /wp-includes.
 * IN the header.php file, IN the <head> I insert :
    <script type=”text/js” src=”
   [http://www.refernet.lu/wp-includes/js/plugin.js&gt](http://www.refernet.lu/wp-includes/js/plugin.js&gt);
   that should be after <script src=”[http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243](http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243);
   type=”text/javascript”></script> … which I don’t see …
 * And where do I insert <script type=”text/js”>$(‘#bd’).equalHeights();</script
   > ???
 *  [Connor Montgomery](https://wordpress.org/support/users/c_t_montgomery/)
 * (@c_t_montgomery)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775482)
 * Yes, that is all correct.
 * If you see something like `<?php wp_enqueue_script("jquery"); ?>`, that is what
   is dynamically inserting the piece of code you aren’t seeing right now. If you
   don”t see anything like that, then just put all of this stuff just before the`
   </head>` tag.
 * You will insert `<script type="text/js">$('#bd').equalHeights();</script>` directly
   after `<script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.
   js>`
 * Hope that works!
 * Connor
    _[sig moderated as per the [Forum Rules](http://codex.wordpress.org/Forum_Welcome)]_
 *  Thread Starter [dicalva](https://wordpress.org/support/users/dicalva/)
 * (@dicalva)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775484)
 * Connor, I hate to be a pain in the bleepç%&*! but this is waht I have now:
 * <script src=”[http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243](http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2&#8243);
   type=”text/javascript”></script>
    <script type=”text/js” src=”[http://www.refernet.lu/wp-includes/js/plugin.js></script&gt](http://www.refernet.lu/wp-includes/js/plugin.js></script&gt);
   <script type=”text/js”>$(‘#bd’).equalHeights();</script> </head>
 * in the header.php
    AND I created this plugin.js as you told BUT it is not working:
   o/ WHERE SHOULD <?php wp_enqueue_script(“jquery”); ?> be visible?
 *  [llamaman](https://wordpress.org/support/users/llamaman/)
 * (@llamaman)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775548)
 * There is a nice plugin that handles this: [WP Equal Columns](http://wordpress.org/extend/plugins/wp-equal-columns/)

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Equal columns? How???’ is closed to new replies.

## Tags

 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [equal](https://wordpress.org/support/topic-tag/equal/)

 * 10 replies
 * 3 participants
 * Last reply from: [llamaman](https://wordpress.org/support/users/llamaman/)
 * Last activity: [15 years, 1 month ago](https://wordpress.org/support/topic/equal-columns-how/#post-1775548)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics