0

On my products page I have set the layout to be 2 columns with right bar. What I am trying to do is make the col-right sidebar border height to be the same as the col-main. I have tried doing this in the CSS and have been only able to do it by manually setting the pixel height. Obviously the main class and the col-main class heights are set by the content. I was just wondering if there is a way to set the col-right sidebar class border height to automatically be the same as the col-main class?

enter image description here

1

Use javascript Luke.
add this in any layout files (untested code, syntax errors may appear...but you get the idea):

<default><!-- if you need it in only a specific page use the appropriate layout handle for example `cms_index_index` for homepage -->
    <reference name="content">
        <block type="core/text" name="height-fixer">
             <action method="setText">
                 <text><![CDATA[
                     <script type="text/javascript">
                         document.observe("dom:loaded", function() {
                             var mainCol = $$('.col-main');
                             var rightCol = $$('.col-right');
                             if (typeof mainCol[0] != "undefined" && typeof rightCol[0] != "undefined") {
                                 if (mainCol[0].getHeight() > rightCol[0].getHeight()) {
                                     rightCol[0].setStyle({height:mainCol[0].getHeight() + 'px'});
                                 }
                             }
                         });
                     </script>
                 ]]></text>
             </action>
        <block>
    </reference>
</default>
| improve this answer | |
  • Thankyou for your answer Marius, i appreciate it. The only problem is that I am not very good with Javascript (yet). I did add this code to the local.xml but it didn't seem to work and it messed up the other things that were in the local.xml. I have also realised in my continued testing that there are situations ie in the shopping cart, where the col-right sidebar is longer than the col-main, so I don't know if the code example would mess that particular situation. but thanks again for your help. – Yetisam Jul 22 '14 at 2:04
  • The js code above should handle the case when the main column is smaller than the right col. In that case, nothing should happen. – Marius Jul 22 '14 at 6:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.