ripkjs Posted April 20, 2009 Share Posted April 20, 2009 I'm looking to change the height of one element to the size of another. Here is a screen shot for a better idea of what I'm talking about. The red element is an include of a table. The height of this element will change depending on the content. Width will always be the same. The orange element is an include of several other various htm files. This will always be much taller than the red element. I need the height of this to extend to the bottom of the light orange area (being the end of the red in the screen shot. For the screen shot's sake I gave the orange element a static height of 500px.) I need the red element and orange element to have the exact same height, while red is dynamically defining this shared height. The overflow of only the orange can scroll. Here is the basic code that is being used. Stripped out the PHP to shorten the example code. Using CSS to format these elements. <body> <div class="virtab"> <div class="banner"> </div> <div class="head"> </div> <div class="body"> <table> <tr> <td> <div class="red"> <?php //***RED ELEMENT***// ?> </div> </td> <td> <div class="orange"> <?php //***ORANGE ELEMENT***// ?> </div> </td> </tr> </table> </div> <div class="foot"> </div> </div> </body> Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted April 20, 2009 Share Posted April 20, 2009 Did you check "faux columns" Quote Link to comment Share on other sites More sharing options...
ripkjs Posted April 20, 2009 Author Share Posted April 20, 2009 Yup, I'd like to actually extend that column down, not just have an illusion of it being the same. There's going to be actual content that will be in the orange area that I'd like to have the same height as the table to the left (red). If I don't give the orange a height, it extends down the page 2-3x longer than the red. Which wouldn't be an issue if the red element was always static, but rows will be added and removed over time. Is there a way to use code to get the height of the red, then set that height in the CSS? Quote Link to comment Share on other sites More sharing options...
ripkjs Posted April 21, 2009 Author Share Posted April 21, 2009 After a bit of playing, I found this ghetto way of solving the problem... Might be a better one out there, but if it works, why fix it! <div class="history" style="height: <?php $points = 'BALANCES.HTM'; $getPoints = file_get_contents($points); $countTR = substr_count($getPoints, "<TR"); $h = 2; //Difference in header row $r = 22; //Height of each row $result = ($countTR*$r-$h); echo $result ?> px;"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.