Что нам стоит дом построить?

Почувствуй как верстали ещё вчера!

plain

table

<table
    border="0"
    cellspacing="0"
    cellpadding="0"
    width="100%">
  <!--…-->
</table>

<tr>
    <th colspan="3">Шапка</th>
</tr>

<tr>
  <td width="350">Левая колонка</td>
  <td>Центральная колонка</td>
  <td width="250">Правая колонка</td>
</tr>

<tr>
    <th colspan="3">Подвал</th>
</tr>

<table  border="0" width="100%"
        cellspacing="0" cellpadding="0">
    <tr><th colspan="3">Шапка</th></tr>
    <tr>
      <td width="350">Левая колонка</td>
      <td>Центральная колонка</td>
      <td width="250">Правая колонка</td>
    </tr>
    <tr><th colspan="3">Подвал</th></tr>
</table>

Шапка
Подвал
Левая колонка	Центральная колонка	Правая колонка

<table
    border="0"
    cellspacing="0"
    cellpadding="0">
  <tr><!--…--></tr>
  <tr><!--…--></tr>
  <tr><!--…--></tr>
</table>

<td height="58" width="63">
    <img src="images/lt.png" alt="">
</td>
<td height="58">
    <img width="100%" height="58"
            src="images/t.png" alt="">
</td>
<td height="58" width="63">
    <img src="images/rt.png" alt="">
</td>

<td width="63" height="100%">
    <img width="63" height="100%"
            src="images/l.png" alt="">
</td>
<td>
    <img src="images/picture.jpg" alt="Иллюстрация">
</td>
<td width="63" height="100%">
    <img width="63" height="100%"
            src="images/r.png" alt="">
</td>

<td height="58" width="63">
    <img src="images/lb.png" alt="">
</td>
<td height="58">
    <img width="100%" height="58"
            src="images/b.png" alt="">
</td>
<td height="58" width="63">
    <img src="images/rb.png" alt="">
</td>

<img class="framed"
        src="images/picture.jpg"
        alt="Иллюстрация">

.framed {
    border-style: solid;
    border-width: 58px 63px;
    border-image: url('border.png') 58 63;
}

frameset

<frameset rows="100, 1*, 100">
    <frame src="header.html" name="header">
    <frameset cols="350, 1*, 250">
        <frame src="left.html" name="left">
        <frame src="content.html" name="content">
        <frame src="right.html" name="right">
    </frameset>
    <frame src="footer.html" name="footer">
</frameset>

<iframe
    src="iframe.html"
    frameborder="0"></iframe>

float

После того, как в 1848 в Калифорнии было обнаружено золото, началась так называемая Калифорнийская золотая лихорадка, усилившая поток переселенцев. Для ряда религиозных групп переселение на малозаселённые западные территории предоставляло возможность избежать внешнего влияния и конфликтов с представителями основных конфессий и властями. Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

<img src="picture.jpg"
     class="illustration"
     alt="Иллюстрация">
<p> После того, как в 1848 в Калифорнии…</p>

.illustration {
    float: left;
    margin: 0 24px 24px 0;
}

После того, как в 1848 в Калифорнии было обнаружено золото, началась так называемая Калифорнийская золотая лихорадка, усилившая поток переселенцев.

Для ряда религиозных групп переселение на малозаселённые западные территории предоставляло возможность избежать внешнего влияния и конфликтов с представителями основных конфессий и властями.

<div class="column">
    После того, как в 1848 в Калифорнии…
</div>
<div class="column">
    Для ряда религиозных групп переселение…
</div>

.column {
    float: left;
    margin: 0 20px;
    width: 400px;
}

Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

<div class="column">
    Одним из примеров этому являются мормоны…
</div>
<div class="main">
    Для ряда религиозных групп переселение…
</div>

.column {
    float: left;
    width: 300px;
}

.main {
    margin-left: 300px;
}

Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

<div class="column">
    Одним из примеров этому являются мормоны…
</div>
<div class="main">
    Для ряда религиозных групп переселение…
</div>

.column {
    float: left;
    width: 300px;
}

.main {
    overflow: hidden;
}

Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

А потом прибежали матросы и всех съели.

<div class="column column--left">
    Одним из примеров этому являются мормоны…
</div>
<div class="column column--right">
    А потом прибежали матросы…
</div>
<div class="main">
    Для ряда религиозных групп переселение…
</div>

.column {width: 300px;}
.column--left {float: left;}
.column--right {float: right;}
.main {
    overflow: hidden;
}

Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

А потом прибежали матросы и всех съели. Для ряда религиозных групп переселение на малозаселённые западные территории предоставляло возможность избежать внешнего влияния и конфликтов с представителями основных конфессий и властями. Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

<div class="content">
    <div class="column column--left">
        Одним из примеров этому являются мормоны…
    </div>
    <div class="column column--right">
        А потом прибежали матросы…
    </div>
    <div class="main">
        Для ряда религиозных групп переселение…
    </div>
</div>
<footer class="footer">Подвал</footer>

Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

<div class="content">
    <div class="column column--left">
        Одним из примеров этому являются мормоны…
    </div>
    <div class="column column--right">
        А потом прибежали матросы…
    </div>
    <div class="main">
        Для ряда религиозных групп переселение…
    </div>
    <div class="clear"></div>
</div>
<footer class="footer">Подвал</footer>

.clear {
    clear: both;
}

Одним из примеров этому являются мормоны, поселившиеся в штате Юта в 1847 г.

.container:after {
    content: ".";
    display: block;
    clear: both;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    height: 0;
    overflow: hidden;
}

.container:after {
    content: "";
    display: table;
    clear: both;
}

Negative margin

<section class="container">
    <main class="main">
        Капитал снял штаны и, …
    </main>
    <aside class="aside">
        Баннер с огромным …
    </aside>
</section>

.main {
    float: left;
    width: 100%;
}
.aside {
    float: left;
    width: 250px;
}

Капитал снял штаны и, схватив сачек, с радостным гикньем прыгнул в толпу матросов, которые высоко задирая ноги пытались увернуться от исходящих черной злобой утконосов. Никто уже не знает решил ли он, что пропускает вечеринку или собирался ловить утконосов в штанины.

Баннер с огромным утконосом

.main {
    float: left;
    width: 100%;
}
.aside {
    float: left;
    width: 250px;
    margin-left: -250px;
}

Баннер с огромным утконосом

.main {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding-right: 250px;
}

Баннер с огромным утконосом

.aside {
    float: left;
    width: 250px;
    margin-left: -250px;
    position: relative;
}

Баннер с огромным утконосом

Creating Liquid Layouts with Negative Margins
2004 год.

QRCODE cо ссылкой на Creating Liquid Layouts with Negative Margins

https://alistapart.com/article/negativemargins

The Definitive Guide to Using Negative Margins
2007 год.

QRCODE cо ссылкой на The Definitive Guide to Using Negative Margins

https://smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

<header class="header">Шапка</header>
<section class="container">
    <main class="main">Утконос пырился…</main>
    <nav class="nav">Навигация</nav>
    <aside class="aside">Баннер</aside>
</section>
<footer class="footer">Подвал</footer>

.container {
    position: relative;
    padding: 0 350px 0 250px;
}

Утконос пырился на Гарри из кустов и сипло шыпел. Прияиной этому мог быть как заах Гарри, которого вовсе не случайно прозвали «Грязным Гарри», так и злобным от природы нравом хищного зверька.

Навигация

Баннер с пищей для утконосов и мылом

.main {
    float: left;
    width: 100%;
}
.nav {
    float: left;
    width: 250px;
}
.aside {
    float: right;
    width: 350px;
}

Навигация

Баннер с пищей для утконосов и мылом

.nav {
    margin-left: -100%;
}
.aside {
    margin-right: -350px;
}

Навигация

Баннер с пищей для утконосов и мылом

.nav {
    position: relative;
    left: -250px;
}

Навигация

Баннер с пищей для утконосов и мылом

.nav {
    transform: translateX(-250px);
}

.nav {
    margin-left: calc( -100% - 250px );
}

In Search of the Holy Grail
2006 год.

https://alistapart.com/article/holygrail

Навигация

Баннер с пищей для утконосов и мылом

.nav,
.main,
.aside {
    padding-bottom: 9999px;
}

Навигация

Баннер с пищей для утконосов и мылом

.nav,
.main,
.aside {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

Навигация

Баннер с пищей для утконосов и мылом

.container {
    overflow: hidden;
}

Навигация

Баннер с пищей для утконосов и мылом

.footer {
    box-shadow: 0 9999px 0 9999px #f0f;
}

Навигация

Баннер с пищей для утконосов и мылом

Faux Columns
2004 год.

https://alistapart.com/article/fauxcolumns

CSS Equal Height Columns, Three Different Ways
2014 год.

http://callmenick.com/post/css-equal-height-columns-three-different-ways

<header class="header">Шапка</header>
<section class="container">
    <main class="main">Утконос пырился…</main>
    <nav class="nav">Навигация</nav>
    <aside class="aside">Баннер</aside>
</section>
<footer class="footer">Подвал</footer>

.container {
    position: relative;
    width: 100%;
}
.nav { width: 250px; }
.aside { width: 350px; }
.main {
    width: 100%;
    box-sizing: border-box;
    padding: 0 350px 0 250px;
}

.nav,
.aside,
.main {
    float: left;
}

Навигация

Баннер с пищей для утконосов и мылом

.nav,
.aside,
.main {
    position: relative;
    left: 100%;
}

Навигация

Баннер с пищей для утконосов и мылом

.nav {
    margin-left: -100%;
    z-index: 2;
}
.aside {
    margin-left: -350px;
    z-index: 2;
}
.main {
    margin-left: -100%;
    z-index: 1;
}

Навигация

Баннер с пищей для утконосов и мылом

Faux Absolute Positioning
2008 год.

https://alistapart.com/article/fauxabsolutepositioning

inline-block

Шапка

А потом прибежали матросы и стали ловить утконосов. Зверьки бежали по палубе яросно и упорно, время от времени сталкиваясь лбами. Они кусались и норовили лягнуть задней лапой с огромным шипом, сочащимся ядом.

Мало кто вообще может рассказать об этом, ведь, внезапно, прозвучал взрыв. У всех на устах застыло одно лишь слово:
— Пираты!

<header class="header">Шапка</header>
<section class="content"><!--…--></section>
<footer class="footer">Подвал</footer>

<section class="column column--left">
    Одним из примеров этому являются мормоны…
</section>
<main class="column">
    Утконосы были в ужасе!
</main>
<aside class="column column--right">
    А потом прибежали матросы…
</aside>

.content { font-size: 0; }
.column {
    display: inline-block;
    vertical-align: top;
}
.column--left { width: 350px; }
.column--right { width: 250px; }
.column--central { width: calc(100% - 600px); }

<article></article><article></article>

font-size: 0;

<article></article><article></article>

CSS Display Module Level 3

https://www.w3.org/TR/css-display-3/

table =___="

<header class="header">Шапка</header>
<section class="content">
    <section class="column column--left">
        Одним из примеров этому являются мормоны…
    </section>
    <main class="column">
        Утконосы были в ужасе!
    </main>
    <aside class="column column--right">
        А потом прибежали матросы…
    </aside>
</section>
<footer class="footer">Подвал</footer>

.content {
    display: table;
    table-layout: auto;
    width: 100%;
}
.column {
    display: table-cell;
}
.column--left {width: 350px;}
.column--right {width: 250px;}

Шапка

<form action="/subscribe/"
      method="post">
    <label>
        <input type="email" value=""
               required
               placeholder="my@email.com">
    </label>
    <button>Подписать</button>
</form>

form {
    display: table;
    width: 75%;
}
input {
    width: 100%;
    box-sizing: border-box;
}
label {
    width: 100%;
    display: table-cell;
}
button {display: table-cell;}

Где
мои colspan
и rowspan,
Саммер?

vQx

CSS Display Module Level 3

https://www.w3.org/TR/css-display-3/

columns

Капитал снял штаны и, Иллюстрация

схватив сачек, с радостным гикньем прыгнул в толпу матросов, которые высоко задирая ноги пытались увернуться от исходящих черной злобой утконосов.

Никто уже не знает решил ли он, что пропускает вечеринку или собирался ловить утконосов в штанины. Мало кто вообще может рассказать об этом, ведь, внезапно, прозвучал взрыв. У всех на устах застыло одно лишь слово:

— Пираты!

<section class="container">
    <article class="column">
        А потом прибежали матросы…
    </article>
    <article class="column">
        Капитал снял штаны…
    </article>
    <article class="column">
        Внезапно!
    </article>
</section>

.container {
    columns: 3;
    column-gap: 20px;
}
.column {
    break-inside: avoid;
    break-after: column;
}

.illustration {
    margin-left: -50%;
}

Капитал снял штаны и, Иллюстрация

Никто уже не знает решил ли он, что пропускает вечеринку или собирался ловить утконосов в штанины. И уже не узнает, ведь, внезапно, прозвучал взрыв. У всех на устах застыло одно лишь слово:

— Пираты!

.illustration {
    transform: translateX(-50%);
}

Капитал снял штаны и, Иллюстрация

.illustration {
    position: absolute;
    left: 33.333%
    transform: translateX(-50%);
}

Капитал снял штаны и, Иллюстрация

CSS Multi-column Layout Module

https://www.w3.org/TR/css3-multicol/

wrap-flow

.illustration {
    wrap-flow: both;
    position: absolute;
    left: 16.666%
}

.illustration {
    wrap-flow: both;
    position: absolute;
    left: 33.333%
    transform: translateX(-50%);
}

CSS Exclusions Module Level 1

http://drafts.csswg.org/css-exclusions/

flexbox

<article class="page">
    <section class="content">
        <main class="column column-central">
            Утконосы были в ужасе!
        </main>
        <section class="column column--left">
            Одним из примеров этому являются мормоны…
        </section>
        <aside class="column column--right">
            А потом прибежали матросы…
        </aside>
    </section>
    <header class="header">Шапка</header>
    <footer class="footer">Подвал</footer>
</article>

.page {
    display: flex;
    flex-direction: column;
}
.header { order: -1; }

.content {
    flex-grow: 1;
}
.header, .footer {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;
}

Капитал снял штаны и, схватив сачек, с радостным гикньем прыгнул в толпу матросов, которые высоко задирая ноги пытались увернуться от исходящих черной злобой утконосов.

.content { display: flex; }
.column--left {
    order: -1;
    flex-basis: 350px;
}
.column--right { flex-basis: 250px; }
.column--left,
.column--right {
    flex-grow: 0;
    flex-shrink: 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-end;
}

<form action="/subscribe/"
      method="post">
    <input type="email" value=""
            required
            placeholder="my@email.com">
    <button>Подписать</button>
</form>

form {
    display: flex;
}
input {
    flex-grow: 1;
}
button {
    flex-grow: 0;
}

CSS Flexible Box Layout Module Level 1

https://www.w3.org/TR/css-flexbox-1/

Grid Layout

Я вижу
слёзы в зале…

Антон Немцев

http://silentimp.info/

@silentimp

thesilentimp@gmail.com

skype: ravencry

https://goo.gl/y3lvfc

Что нам стоит дом построить?

Почувствуй как верстали ещё вчера!

plain

table

frameset

float

Negative margin

Creating Liquid Layouts with Negative Margins2004 год.

The Definitive Guide to Using Negative Margins2007 год.

In Search of the Holy Grail2006 год.

Faux Columns2004 год.

CSS Equal Height Columns, Three Different Ways2014 год.

Faux Absolute Positioning2008 год.

inline-block

CSS Display Module Level 3

table =___="

Гдемои colspanи rowspan,Саммер?

vQx

CSS Display Module Level 3

columns

CSS Multi-column Layout Module

wrap-flow

CSS Exclusions Module Level 1

flexbox

CSS Flexible Box Layout Module Level 1

Grid Layout

Я вижуслёзы в зале…

Creating Liquid Layouts with Negative Margins
2004 год.

The Definitive Guide to Using Negative Margins
2007 год.

In Search of the Holy Grail
2006 год.

Faux Columns
2004 год.

CSS Equal Height Columns, Three Different Ways
2014 год.

Faux Absolute Positioning
2008 год.

Где
мои colspan
и rowspan,
Саммер?

Я вижу
слёзы в зале…