# Two column - equalColumns issue - Mozilla

**URL:** https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851
**Category:** web dev
**Created:** [June 19, 2008, 6:26pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851 "2008-06-19T18:26:09Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![wheatleyweb](https://avatars.discourse-cdn.com/v4/letter/w/53a042/32.png) [@wheatleyweb](https://forum.kirupa.com/u/wheatleyweb)
#### Post date: [June 19, 2008, 6:26pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/1 "2008-06-19T18:26:09Z")

</div>

```php
<script type="text/javascript">
    function equalColumns(){
        var l = document.getElementById('navigation');
        var r = document.getElementById('pageContent');
        r.offsetHeight >= l.offsetHeight ? l.style.height = r.offsetHeight + "px" : r.style.height = l.offsetHeight + "px";
    }
</script>

<script type="text/javascript">
        equalColumns();
</script>

```

I’m having an issue with my equalColumn script with this layout  
[http://esrgc.org/test/](http://esrgc.org/test/)

In IE it seems to work fine. However in Mozilla, when the page is first loaded the left “navigation” column does not equal the “content” column? Although if you refresh the page, it does. Can anyone help me with this. I’m currently in the process of learning JS, but I’m not versed enough to figure out this simple script issue.

Thank you for your help.

wheatleyweb

---

<div class="post-metadata">

### Author: ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 19, 2008, 6:30pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/2 "2008-06-19T18:30:46Z")

</div>

why are you using this technique for something as simple as:

#navigation { width: xxx; }  
#pageContent { width: xxx; }

---

<div class="post-metadata">

### Author: ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 19, 2008, 6:37pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/3 "2008-06-19T18:37:28Z")

</div>

[quote=fasterthanlight™;2345841]why are you using this technique for something as simple as:

#navigation { width: xxx; }  
#pageContent { width: xxx; }[/quote]

x2 :look:

---

<div class="post-metadata">

### Author: ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)
#### Post date: [June 19, 2008, 7:28pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/4 "2008-06-19T19:28:16Z")

</div>

[QUOTE=fasterthanlight™;2345841]why are you using this technique for something as simple as:

#navigation { width: xxx; }  
#pageContent { width: xxx; }[/QUOTE]

[QUOTE=redelite;2345844]x2 :look:[/QUOTE]  
Sounds to me as if he’s has one column that can be dynamically ‘x’ height and he wants the second column to be equal to the first column, which can’t just be done via css.

You may want to look into runonload and try wrapping your script in that:  
[http://www.davidflanagan.com/javascript5/display.php?n=17-7&f=17/runOnLoad.js](http://www.davidflanagan.com/javascript5/display.php?n=17-7&f=17/runOnLoad.js)

---

<div class="post-metadata">

### Author: ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 19, 2008, 7:38pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/5 "2008-06-19T19:38:55Z")

</div>

oh… height… LOL man I’m blind… :lol:

---

<div class="post-metadata">

### Author: ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 19, 2008, 7:40pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/6 "2008-06-19T19:40:36Z")

</div>

Hahahahahahahyahahahahahahah oh man, faster needs moar coffeez

> 

Sounds to me as if he’s has one column that can be dynamically ‘x’ height and he wants the second column to be equal to the first column, which can’t just be done via css.  
but I thought thats what faux-columns were for ?

\*edit: ahh… looked at the layout again, yea those round corners would break any faux-column action. Damn, I’m not on the ball today, thats fo’sho

---

<div class="post-metadata">

### Author: ![ramie](https://avatars.discourse-cdn.com/v4/letter/r/edb3f5/32.png) [@ramie](https://forum.kirupa.com/u/ramie)
#### Post date: [June 19, 2008, 7:44pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/7 "2008-06-19T19:44:10Z")

</div>

Yer, kinna like [http://www.alistapart.com/articles/fauxcolumns/](http://www.alistapart.com/articles/fauxcolumns/)

---

<div class="post-metadata">

### Author: ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)
#### Post date: [June 19, 2008, 8:02pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/8 "2008-06-19T20:02:59Z")

</div>

yea most of the time faux columns work. there are occasions that do require a more intricate solution. this i believe would be one of those times.

---

<div class="post-metadata">

### Author: ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 19, 2008, 8:05pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/9 "2008-06-19T20:05:47Z")

</div>

Indeed, Blasted round corners!!

---

<div class="post-metadata">

### Author: ![wheatleyweb](https://avatars.discourse-cdn.com/v4/letter/w/53a042/32.png) [@wheatleyweb](https://forum.kirupa.com/u/wheatleyweb)
#### Post date: [June 19, 2008, 8:11pm UTC](https://forum.kirupa.com/t/two-column-equalcolumns-issue-mozilla/263851/10 "2008-06-19T20:11:10Z")

</div>

[quote=simplistik;2345882]Sounds to me as if he’s has one column that can be dynamically ‘x’ height and he wants the second column to be equal to the first column, which can’t just be done via css.

You may want to look into runonload and try wrapping your script in that:  
[http://www.davidflanagan.com/javascript5/display.php?n=17-7&f=17/runOnLoad.js[/quote]](http://www.davidflanagan.com/javascript5/display.php?n=17-7&f=17/runOnLoad.js%5B/quote%5D)

Thanks simplistic! I’ll take a look at that. I’m glad I was not totally off. Again, I’m learning (teaching myself) this stuff guys. Take it easy on the greenhorn! LOL

and yes… “pageContent” is sized to the content length so I need something to ensure that “navigation” column matches its height. It just seemed weird to me that it works flawlessly in IE, and displays properly in Mozilla after a refresh.