Бестабличное расположение форм

Question

После 4 часов на этом, я думаю, я должен объявить себя побежденным. Я не могу больше использовать стили с плавающей точкой, позиционированием и т. Д., Чтобы получить этот макет так, как я хочу.
Я был бы очень признателен, если бы кто-то смог сэкономить мне оставшуюся часть дня и головную боль от создания этого макета в HTML без таблиц:
альтернативный текст http://img142.imageshack.us/img142/4695/form2.jpg

Заранее спасибо !!!

Answer 1

Попробуйте что-то вроде этого:

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

Границы грязные, как и ширина, но, очевидно, ее можно настроить. : P

Answer 2

В качестве альтернативы поплавкам Солти, вы можете попробовать метод "без плавания" .

Например (обратите внимание, я не тестировал этот кросс-браузерный код, но он изменил вывод из компоновщика без плавающих элементов, который я построил для внутреннего использования, который прошел большую часть тестирования браузера в прошлом также обратите внимание на предостережение о том, что IE 6-7 не получит преимущества табличного макета, и столбцы не будут иметь полную высоту без некоторого использования выражений CSS ... если вы можете предопределить высота, это легко преодолеть, очевидно),

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>

Answer 3

Вот статья об использовании тегов div и CSS для макетов таблиц:

http://www.pixel2life.com/publish/tutorials/33/converting_tables_to_a_css_div_tag_and_xhtml_validated_layout/