テーブルを使わずにセクションをレイアウトする方法

テーブルでこのレイアウトを強制することができますが、CSSの表示/浮動小数点の設定がベストプラクティスと考えられます。私は必要に応じて動作しているヘッダーとメニューセクションを持っています。それらの下には、醜いラッピングをしているトップ、ミドル、ボトムのセクションがあります。一番上のセクションには、イメージの後ろにテキストブロックが続くはずです。中央のセクションには3つの等しいテキストブロックが必要です。ボトム（フッタ）には1つの等しいテキストブロックが必要です。それをテーブルに詰め込むことなくこれを行うきれいな方法はありますか？ここで私はこれまでやってるものだと私が言うように、それは醜いです：テーブルを使わずにセクションをレイアウトする方法

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Home Page</title> 
 
    <link href="/Content/site.css" rel="stylesheet"/> 
 
</head> 
 
<body> 
 
    <header> 
 
     <span class="HeaderTitle">My header info</span> 
 
    </header> 
 
    <nav> 
 
\t <!-- the menu is working fine --> 
 
    </nav> 
 
    <main> 
 
     <style> 
 
     .MyArticle 
 
     { 
 
      width: 30%; 
 
      display: inline-block; 
 
      float: left; 
 
      margin: 8px; 
 
     } 
 
     </style> 
 
\t <div class="jumbotron"> 
 
\t  <img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left"> 
 
\t  <p class="lead">Some text</p> 
 
\t </div> 
 
\t <br/> 
 

 
\t <section id="MiddleSection"> 
 
\t  <span class="MyArticle"> 
 
     \t <h2>Current News</h2> 
 
\t   <p>Some text</p> 
 
\t  </span> 
 
\t  <span class="MyArticle"> 
 
     \t <h2>Something</h2> 
 
\t   <p>Some text</p> 
 
\t  </span> 
 
\t  <span class="MyArticle"> 
 
     \t <h2>Something</h2> 
 
\t   <p>Some text</p> 
 
\t  </span> 
 
\t </section> 
 
    </main> 
 

 
    <footer> 
 
     <div> 
 
      <br /> 
 
      <hr /> 
 
      <p>&copy; 2016 - Steve Gaines</p> 
 
     </div> 
 
    </footer> 
 
</body> 
 
</html>

出典

2016-05-03 Steve Gaines

あなたはどのように見えるのでしょうか？比較するには、テーブルのバージョンを指定しますか？まず、 'style'ブロックは' head'の中になければなりません。 '