CODEWITHSUNDEEP
html
sjngm
sjngm

Reputation: 12871

HTML: relative positioned overlapping elements in TD makes TD too wide

I have code that generates a TABLE that contains relative positioned elements causing elements to overlap in a TD. The TD then appears too wide.

Here's a short example of the table:

<html><body>
    <table>
        <tr style="background-color: rgb(221, 255, 221)">
            <td style="padding-left:20px;">
                text1
                <select size="1" style="width: 262px">
                    <option></option>
                    <option>12345</option>
                </select>
                <input type="text" size="5" style="position: relative; left: -262px; width: 239px">
                <span style="position: relative; left: -239px">text2</span>

                <input type="text" size="5" style="position: relative; left: -239px">
                <span style="position: relative; left: -239px">text3</span>
                <input type="text" size="5" style="position: relative; left: -239px">
                <span style="position: relative; left: -239px"> </span>
            </td>
            <td>
                info
            </td>
        </tr>
    </table>
</body></html>

The input-element appears above the select-element.

Obviously I don't have any widths set in TD, TR or TABLE. So it's the browser that makes the first column too wide. The width of the empty space seems to be the width of the input-element.

How can I circumvent this? Basically I want the first column only to be as wide as necessary.

Upvotes: 1

Views: 1743

Answers (1)

Niclas Larsson
Niclas Larsson

Reputation: 858

My guess is that you want somthing like this:

<html><body>
    <table style="width: auto">
        <tr style="background-color: rgb(221, 255, 221)">
            <td style="padding-left:20px;">
                text1
                <select size="1" style="width: 262px">
                    <option></option>
                    <option>12345</option>
                </select>
                <input type="text" size="5" style="position: relative; left: -262px; width: 239px; margin-right: -262px;">
                <span style="position: relative; left: -239px">text2</span>

                <input type="text" size="5">
                <span>text3</span>
                <input type="text" size="5">
                <span> </span>
            </td>
            <td>
                info
            </td>
        </tr>
    </table>
</body></html>

I'm only moving the one you want to place over the select, and compensate with a negative margin.

Else the width of the table cell would have been the same as when you don't use any positioning.

Update 2011-08-11 13:00:

<html><body>
    <table style="width: auto">
        <tr style="background-color: rgb(221, 255, 221)">
            <td style="padding-left:20px;">
                text1
                <select size="1" style="width: 262px">
                    <option></option>
                    <option>12345</option>
                </select>
                <input type="text" size="5" style="position: relative; left: -262px; width: 239px; margin-right: -242px;">
                <span>text2</span>

                <input type="text" size="5">
                <span>text3</span>
                <input type="text" size="5">
                <span> </span>
            </td>
            <td>
                info
            </td>
        </tr>
    </table>
</body></html>

I forgot to remove the last position on the "text2"-span. And after that i had to to change the negative marig-right a bit, so "text2" did not end up on tom of the long input and the select.

Upvotes: 2

Related Questions