CSS: вертикальное расположение столбцов без <table>

Хорошо, я наклонился html & amp; css еще в 2001 году. Я привык делать что-то вроде этого (чтобы создать веб-сайт с макетом «вертикальный столбец»):

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / header -->

<!-- / content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!-- / content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / footer -->
</table>
</body>
</html>

Легко, все автоматически выровняется так, как я хочу, без головной боли и т. Д. Жизнь тогда была хорошей. ОДНАКО, не так давно я читал, что этот подход больше не должен использоваться. Я собирался попробовать новый способ, используя кучу div'ов, но w3c & amp; Проверка w3c не нравится, когда вы используете блочные элементы в качестве встроенных элементов ... WTF !!!

Итак ... мое разочарование заставило меня спросить вас, ребята:

HOW? Как сделать что-то подобное «современным способом» ... как можно проще? У HTML 5 есть лучший способ?
WHY? Почему сейчас нам не следует использовать этот табличный подход для получения «вертикального расположения столбцов»? на сайте?

Ответы на вопрос(3)

Ваш ответ на вопрос