CODEWITHSUNDEEP
javascripthtmlcss
Marek
Marek

Reputation: 3

How to make this table's height equal to the middle td's height

I have a HTML table & I am trying to make its height equal to the middle td elements height. BTW sorry if this is flagged as a repost of my other question, but I have simplified my HTML so it will be easier for someone to read my code & help me. PS: it would be interesting to know if there's a better way to acheive what I am trying to do without using tables.

Do you know how I can do this(using pure CSS or using CSS & javascript)?

If you look at my JSFiddle you will see my problem really easy(it has pictures & everything), the table height is only meant to be about 300px not 700 or so.

http://jsfiddle.net/aFt2J/

<html>
<head>
    <style type="text/css">
    <!--
        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        body { background-color: red; }

        .contentTable        { height: inherit; }
        .contentRow          { height: inherit; }
        .tableTopPanel       { height: 6.25%; }
        .tableBottomPanel    { height: 6.25%; }
        .tableLeftPanel      { width: 6.25%; padding: 0; margin: 0; }
        .tableRightPanel     { width: 6.25%; padding: 0; margin: 0; }
        .tableCentrePanel    { background-color: #FFFFFF; }
        .pageContent         { border-color: #99CCFF; border-width:thin; border-style:solid; border-right-width:thick;
                               border-bottom-width:thick; padding-top: 0.5em; border-top: 0; }

    -->
    </style>

</head>

<body>

    <div style="padding-left: 21%; width: 58%;">

        <!-- Top of Column -->
        <div class="tableTopPanel"><img src="http://www.kaz.net.au/images/temp/contentTopBk.png" width="100%" alt=""/></div>
        <table class="contentTable">
            <tr class="contentRow">
                <!-- Left Side of Column -->
                <td class="tableLeftPanel"><img src="http://www.kaz.net.au/images/temp/contentLeftBk.png" alt=""/></td>
                <!-- Middle of Column: where all the text is. The table height should equal this td elements height -->
                <td class="tableCentrePanel">
                    <img class="pageHeading" src="http://www.kaz.net.au/images/temp/coursesHeading2.png" width="100%" alt=""/>
                    <div class="pageContent">
                        <p>Kazcare cooperates with <a href="http://www.weaillawarra.com/index.html">WEA Illawarra</a> to offer a range of educational courses.</p>
                        <p>Some of the courses held at Kazcare Education Facilities include: </p>

                        <br/>
                        <p class="a">
                            To view the full range of WEA Illawarra courses held at KazCare please visit <a href="http://enrol.weaillawarra.com/index.html">WEA Illawarra Courses</a>.
                        </p>
                    </div>
                </td>
                <!-- Right Side of Column -->
                <td class="tableRightPanel"><img src="http://www.kaz.net.au/images/temp/contentRightBk.png" alt=""/></td>
            </tr>
        </table>
        <!-- Bottom of Column -->
        <div class="tableBottomPanel"><img src="http://www.kaz.net.au/images/temp/contentBottomBk.png" width="100%" alt=""/></div>

    </div>

</body>
</html>

Upvotes: 0

Views: 294

Answers (2)

user428071
user428071

Reputation:

Have you considered not using tables and using an old css method to achieve rounded corners + drop-shadows with background images. Ditching tables will bring the line count dramatically and is better practice.

See jsfiddle to see rough example I created for you. Please note you will need to chop the background images much better.

Upvotes: 1

Dmitry Samuylov
Dmitry Samuylov

Reputation: 1564

To accomplish your height aligning concern you should change your CSS as follows:

.tableLeftPanel { width: 6.25%; padding: 0; margin: 0; background:transparent url(http://www.kaz.net.au/images/temp/contentLeftBk.png) repeat-y; }
.tableRightPanel { width: 6.25%; padding: 0; margin: 0; background:transparent url(http://www.kaz.net.au/images/temp/contentRightBk.png) repeat-y; }

And change your left and right column markup as follows:

<!-- Left Side of Column -->
<td class="tableLeftPanel"></td>

<!-- Right Side of Column -->
<td class="tableRightPanel"></td>

Upvotes: 0

Related Questions