Table-less form layout

Answer 1

Try something like this:

<style type="text/css">
.left {
    height: 100%;
    width: 20%;
    float: left;
    border: 1px solid black;
}
.right {
    height: 100%;
    width: 70%;
    float: left;
    border: 1px solid black;
    border-left: 0px solid black;
}
.wrap {
    width: 750px;
    height: 100px;
    border: 0px solid black;
}
.top {
    height: 25%;
    border-bottom: 1px solid black;
}
.bottom {
    border-top: 1px solid black;
}
.middle {
    height: 50%;
}
</style>
<div class="wrap">
    <div class="left">Left content</div>
    <div class="right">
     <div class="top">Top</div>
     <div class="middle">Middle</div>
     <div class="bottom">Bottom</div>
    </div>
</div>

The borders are messy and so are the widths but obviously it can be customized. :P

Answer 2

As an alternative to Salty's floats, you might try the "no float" method.

For example (note, I have not tested this code cross-browser, but it's modified output from a no-float layout builder I built for internal use, which has gone through a lot of browser testing in the past; also note the caveat that IE 6-7 will not get the benefits of table-like layout, and columns will not be full height without some use of CSS Expressions... if you can predetermine the height, that's easy to overcome obviously),

CSS:

/* No-float */

/* Equivalent to <table> */
.lr {
    display: table;
    position: relative;
    table-layout: fixed;
    padding: 0;
    margin: 0;
    width: 100%;
    border-collapse: separate;
}

/* Equivalent to <tr> */
.lcc {
    display: table-row;
    padding: 0;
    margin: 0;
}

/* Equivalent to <td> */
.lc {
    display: table-cell;
    padding: 0 1px 0 0;
    vertical-align: top;
}

/* <div> within cell to make styles across browsers more uniform */
.lccc {
    position: relative;
    top: 0;
    left: 1px;
    width: 100%;
    height: 100%;
    padding: 1px 0 0 1px;
    margin: 0 -1px;
}
/* Adjust positioning in .lccc */
.content {
    margin: -1px 0 0 -1px;
    *margin: 0;
}

/* IE 6-7 compat */
.lr, .lcc {
    *display: block;
    *word-wrap: break-word;
    *overflow-x: hidden;
}
.lc {
    *display: inline;
    *zoom: 1;
    *width: 100%;
    *height: 100%;
    *line-height: inherit;
    *word-wrap: break-word !important;
    *overflow-x: hidden;
    *margin-right: -1px;
}
.lccc {
    *margin: -1px 0 0 -2px;
    z-index: 2;
}



/* Custom stuff */

.label {
    width: 200px;
    text-align: right;
}
.field {
    width: 550px;
}
.field .content {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

form .lr {
    width: 750px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

form .lc {
    border: 1px solid #000;
}

/* Top and left padding are +1 */
form .lccc {
    padding: 16px 0 15px 1px;
}
form .content {
    padding: 10px;
}

HTML:

<form>
    <div class="lb lr">
        <div class="lcc">
            <div class="lb lc label">
                <div class="lccc">
                    <div class="content">
                        <label for="field1">Field 1</label>
                    </div>
                </div>
            </div>
            <div class="lb lc field">
                <div class="lccc">
                    <div class="content">
                        <input id="field1" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lb lr">
        <div class="lcc">
            <div class="lb lc label">
                <div class="lccc">
                    <div class="content">
                        <label for="field2">Field 2</label>
                    </div>
                </div>
            </div>
            <div class="lb lc field">
                <div class="lccc">
                    <div class="content">
                        <textarea id="field1" rows="10" cols="50"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>