5 Replies Latest reply on Mar 23, 2010 5:41 PM by ottz0

    Make Colums height in IE and FF the same

    ottz0 Level 1

      Is there a Hack to make the columns the same hegiht in FF and IE?

       

      As the content is differnt on each page I need the colums to even up on each page, escpecially the right hand column.

       

      Please preview the bottom  right column in both and you will see what I mean

       

      http://www.curiousconcepts.com/web_design.html

       

      thanks

        • 1. Re: Make Colums height in IE and FF the same
          martincou Level 3

          You need to use some hacks to make 2 divs equal height. You can't say height 100% of parent div.

           

          I use javascript. Here is a simple script that you can use with your layout.

           

          There is a lot of them on the web, including jQuery, the popular js framework.

           

          Another (old) technique is described here. I personnaly prefer javascript techniques.

           

          --

          Martin

          • 2. Re: Make Colums height in IE and FF the same
            ottz0 Level 1

            Hi I tried this and this is a good hack.

             

            However I have a left div with 2 divs in it and a right div with 2 divs in it. It will make all the divs equal height or if I code the 2 bottom divs it will make the the same height.

             

            But because the right div is higher up the top of the browser there is still a difference and it make it the same height.

             

            Is there a CSS hack that might do this?

             

            Kind of hard to explain. It makes the divs equal height at the bottom but the 2 divs are different from the top

             

            thanks

            • 3. Re: Make Colums height in IE and FF the same
              shunithD Level 3

              Not quite understanding what you're aiming at...in FF... it looks fine. In IE6 looks fine... Except on the Home page... the CMD button is a png with transparency which IE6 does not recognise... leaves a solid bit around the transparency part... should be ok in IE7 and above though...

              • 4. Re: Make Colums height in IE and FF the same
                martincou Level 3

                What if you take out your explicit height in your #casebox_web_design ?

                • 5. Re: Make Colums height in IE and FF the same
                  ottz0 Level 1

                  On this page and other pages except the home page

                   

                  http://www.curiousconcepts.com/web_design.html

                   

                  I have 2 columns left and right.

                   

                  On the left colums there are 2 boxes (text box and then the image display) and the right hand column there are 2 boxes (subscribe to newsletter and case study)

                   

                  I want the 2 columns (image display and case study) to line up at the bottom flush with FF and IE. I cannot acheive this. If I set a height on either FF or IE on each page this is fine I can do this but there is around a 10px - 15px difference between the colums because of the FF and IE thing.

                   

                  Eg if I set the height for FF to be flush bottom to case study box will line up perfectly with the bottom of the image box but in IE this will overhang by around 10-15px.

                   

                  I need to find a hack to make these the same across the browser platforms.