Question

Why is it so awkward to get a two-column form layout to work in CSS?

All I want to accomplish is:

Name:         Joe Dude
Age:          30
Description:  Some long text here that needs to wrap if it exceeds the border,
              but still indent to align w/ the first line.
Location:     New York

Here is my HTML (w/ some embedded Razor):

<div class="section">
    <label>Name:</label>
    <span>@person.Name</span>
    <label>Age:</label>
    <span>@person.Age</span>
    <label>Description:</label>
    <span>@person.Description</span>
    <label>Location:</label>
    <span>@person.Location</span>
</div>

Here is my CSS:

.section
{
    padding: 5px;
    border-radius: 7px;
    border: 1px solid #aaa;
    margin:0 auto;
}
.section label
{
    display:block;
    font-weight:bold;
    text-align:right;
    width:50%;
    float:left;
}

.section span
{
    display:block;
    text-align:left;
    width:50%;
    float:right;
}

This almost works, except the border is collapsed upwards, and some other weird wrapping is going on below the form.

What am I missing?

Thanks in advance.

Answer 1

I started out with @graup’s solution, and altered it as it wasn’t working w/ wrapped text.

Here is the CSS I ultimately went with:

.section
{
    width:800px;
    overflow: hidden;
}
.section label
{
    display:block;
    width:400px;
    float:left;
}

.section span
{
    width:400px;
    display: inline-block;
}