Two column layout in CSS without using tables

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.

graup · Accepted Answer · 2011-07-08 21:26:39Z

2

overflow:hidden; on .section

The floats essentially make the .section "empty" because they float out of it. The overflow hack fixes this.

You could also remove the float: from one of the elements inside.

answered Jul 8, 2011 at 21:26

graup

1,0991 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jerad Rose Over a year ago

Thanks! The overflow: hidden part seems backwards to me. But it certainly fixes my issue.

xec Over a year ago

this does not seem to solve the problem entirely, labels and spans swap places at small widths (or wide content)

You Over a year ago

Actually, overflow: auto; suffices, IIRC.

Jerad Rose · Accepted Answer · 2011-07-12 18:19:54Z

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;
}

answered Jul 12, 2011 at 18:19

Jerad Rose

15.5k18 gold badges88 silver badges157 bronze badges

Comments

xec · Accepted Answer · 2011-07-08 21:48:03Z

0

Alternative solution:

.section label {
    display: block;
    float: left;
    width: 200px;
}
.section span {
    display: block;
    margin-left: 200px;
}
.section span:after {
    content: "";
    display: block;
    clear: left;
}

this relies on static width for left column, but should also wrap nicely with percentages!

I'm not sure if IE7 and older likes the :after selector.

Demo: http://jsfiddle.net/y4NcC/

More information, and support for legacy IE: http://colinaarts.com/articles/float-containment/

edited Jul 8, 2011 at 21:48

answered Jul 8, 2011 at 21:40

xec

18.1k3 gold badges50 silver badges58 bronze badges

Collectives™ on Stack Overflow

Two column layout in CSS without using tables

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related