for a homework assignment I am creating an algorithm in order to format math. I am having a lot of trouble aligning stuff. anyways the problem is when I try to combine two functions. let me show you what I mean:

for example I have the function Integral:

```
<table class="integral" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="bottom" align="center">
            8
        </td>
        <td valign="center" rowspan="3">
            <table>
                <tr>
                    <td>
                        &nbsp;&nbsp; x+3+
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr valign="top">
        <td>
            <div style="margin-top: -50%; font-weight: lighter;">
                <span style="font-size: 300%;">&int;</span></div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
            0
        </td>
    </tr>
</table>

```

that renders as:

![enter image description here](https://i.stack.imgur.com/sQf68.png)

another example is the division:

```
<style>
    td.upper_line
    {
        border-top: solid 1px black;
    }
    table.fraction
    {
        text-align: center;
        vertical-align: middle;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        line-height: 2em;
    }
</style>

<table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="float:left; margin-left:20px;">
    <tr>

        <td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
        </td>
    </tr>
    <tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>

```

that renders as:

![enter image description here](https://i.stack.imgur.com/F8fLO.png)

I am having trouble combining two functions. for example I want to append to the integral the division. In other words I will like to end up with something like:
-----------------------------------------------------------------------------------------------------------------------------------------------------------------

![enter image description here](https://i.stack.imgur.com/uDRuH.png)

I know that I could use absolute positioning and play around with the coordinates in order to solve the problem. but I want to be able to make it work regardless of what data each function contains. just like in the first two examples. for example to the division you may change the text and the division line will grow accordingly...

when I place the division table inside the integral table I get:

```
<table class="integral" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="bottom" align="center">
            8
        </td>
        <td valign="center" rowspan="3">
            <table>
                <tr>
                    <td>
                        &nbsp;&nbsp; x+3+
                        <table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="float:left; margin-left:20px;">
    <tr>

        <td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
        </td>
    </tr>
    <tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr valign="top">
        <td>
            <div style="margin-top: -50%; font-weight: lighter;">
                <span style="font-size: 300%;">&int;</span></div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
            0
        </td>
    </tr>
</table>

```

![enter image description here](https://i.stack.imgur.com/OPjrg.png)