Home/ Questions/Q 8439353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T07:59:20+00:00

I’m trying to be a good developer and not use tables, but I’ve been

  • 0

I’m trying to be a good developer and not use tables, but I’ve been unsuccessful. Here’s my attempt…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Because some people complain if I don't specify all the obvious tags</title>
</head>
<body>
    <div style="width:100%">
        <div style="background-color:Purple;width:25px;float:right"><input type="button" style="width:15px" /></div>
        <div style="background-color:Aqua"><input style="width:100%" /></div>
    </div>
</body>
</html>

This is the output that I get. I was hoping the input box would be on the left side of the button, but unfortunately it’s underneath.

Output

To demonstrate what I want, this is how I would do it if I were to use a table:

<table style="width:100%">
    <tr>
        <td style="background-color:Aqua"><input style="width:100%;box-sizing: border-box" /></td>
        <td style="background-color:Purple;width:25px"><input type="button" style="width:15px" /></td>
    </tr>
</table>

Expected output

Please note:

  • I can’t change the doctype tag
  • The solution must not use tables
  • This should work regardless of the size specified in the containing div, which is currently set to 100%.

Thank you 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I had a working table layout as you do, I’d do something like this:

    .layout-table
{
    display: table;
}
.layout-table > div
{
    display: table-row;
}
.layout-table > div > div
{
    display: table-cell;
}

    And then:

    <div class="layout-table" style="width:100%">
    <div>
        <div style="background-color:Aqua">
            <input style="width:100%;box-sizing: border-box">
        </div>
        <div style="background-color:Purple;width:25px">
            <input type="button" style="width:15px">
        </div>
    </div>
</div>

    Fiddle

    Of course, all that styling would be done externally too, but you get the point. This is identical to your table layout, but it’s done with divs styled to act like tables, separating layout from content.

    Actually, I would probably be lazy and just use <table role="presentation"> but that’s bad (not to mention invalid with your obsolete doctype).

    • 0