Колонки (div и др.блоки) одинаковой высоты | CSS

• Два блока одинаковой высоты
• Как сделать в таблице отступы только между ячейками
• Три колонки равной высоты, но разной ширины
• У боковой колонке высота равна основному содержимому
• Как сделать чтобы текст переходил (перетекал) из одной колонки в другую

Два блока одинаковой высоты

Будем верстать на HTML5 под резиновый сайт, поэтому вместо div я использовала main, article и aside

<article>

<aside>

<style>
main {
  display: table;
  table-layout:fixed;
  width: 100%;
  border-spacing: 20px;  /* расстояние между ячейками */
  background: #ccc;
}
article, aside {
  display: table-cell;
  background: rgb(89, 89, 89);
}
aside {
  width: 20%;  /* может быть и в px */
}
</style>

<main>
<article></article>
<aside></aside>
</main>

Как сделать в таблице отступы только между ячейками

Жаль, border-spacing (там пример) устанавливает отступ не только между ячейками, но и от краёв таблицы до ячеек. Поэтому для того, чтобы увеличить расстояние между колонками, приходится подвинуть дочерние элементы с помощью transform: translate.

<article>

<aside>

<style>
main {
  display: table;
  table-layout:fixed;
  width: 100%;
  border-spacing: 20px 0;  /* расстояние будет 20*3=60px, может быть и в % */
  background: #ccc;
}
main > :first-child {
  transform: translateX(-20px);
}
main > :last-child {
  transform: translateX(20px);
}
article, aside {
  display: table-cell;
  background: rgb(89, 89, 89);
}
aside {
  width: 20%;
}
</style>

<main>
<article></article>
<aside></aside>
</main>

Три колонки равной высоты, но разной ширины

Стиль CSS будет тот же. А HTML можно варьировать. Можно задать каждой колонке свою ширину и отступ как в процентах, так и в пикселях.

<article>

<aside>

<aside>

<main>
<article></article>
<aside></aside>
<aside></aside>
</main>

<aside>

<article>

<aside>

<main>
<aside></aside>
<article></article>
<aside></aside>
</main>

Хм, сейчас запутаю вас окончательно, нужно было просто взять div. HTML выше подходит для: Но не для Так выглядит Главная страница или страница тегов. Тут вместо article нужно использовать section, у которого будет несколько потомков article. То есть статья — это article. Несколько статей объединяются в section.