Home/ Questions/Q 5955811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T18:10:00+00:00

Okay this is embarrassing. I’m almost tempted to use TABLE but I think it’s

  • 0

Okay this is embarrassing. I’m almost tempted to use TABLE but I think it’s wrong.

Basically, I have a page with a fieldset, that in “Edit Mode” has a bunch of inputs like so:

<label for="txtName">Address</label>
<textarea name="Name" id="txtName">
    1 The test
    AddressTown
    UK
</textarea>

When this page is in “Read Only” mode, the textarea turns into a span e.g

<label>Address</label>
<span>
    1 The test<br />
    AddressTown<br />
    UK
</span>

I want to lay the label and value out in a tabular way so that each label is on the left with a fixed width and the input or span follows it like so:

---------------------------
Name       1 the test
           AddressTown
           UK
---------------------------

This would be a no-brainer in a TABLE:

<table>
<tr>
    <th style="width: 150px; vertical-align: top;">
        <label>Address</label>
    </th>
    <td>
        <span>
        1 The test<br />
        AddressTown<br />
        UK
        </span>
    </td>
</table>

However I have been trying to achieve this with CSS, using float on just the label and on both, but no matter what I try, I’m in one of the following scenarios:

  • The second line of the span wraps below the label
  • The span starts directly beneath the label
  • I get a nice tabular layout BUT I have to specify the width of the span, which I don’t want to do.

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As per my comment above there is nothing wrong with using tables for a tabular layout! If however you really don’t want to use tables, you can set the span to display: block and give it a margin.

    <!DOCTYPE html>
<html>
    <label>Address</label>
    <span>
        1 The test<br />
        AddressTown<br />
        UK
    </span>

    <style>
        label { float: left; width: 200px; }
        span { margin-left: 200px; display: block; }
    </style> 
</html>
    • 0