SEOフレンドリー3列レイアウト

Question

：

leftColumn | mainColumn | rightColumn 

leftColumnと右列には、両方の広告欄であり、mainColumnセクションでは、すべてのSEOの豊富なコンテンツが含まれています。もしそのよう

<div id="mainColumn"> 
</div> 
<div id="leftColumn"> 
</div> 
<div id="rightColumn"> 
</div> 

Iはまた、それをこのように行った：したがって主コンテンツはSEOの利益のために最初に見られるように、私は、次の順序で配置するために使用されるdiv要素を配置しているコードに

ユーザーはモバイルからページをブラウズしており、広告ではなくメインのコンテンツが最初に表示されます。

私の質問は正しい順序で表示されるように列のスタイルを設定することです。 これはHTML5/CSS3ページです。

Answer 1

あなたは出発点として、このような何かを行うことができます。

<div id="mainColumn" class="column">1</div> 
<div id="leftColumn" class="column">2</div> 
<div id="rightColumn" class="column">3</div> 

.column { 
    position:relative; 
    float:left; 
    width:25%; 
} 
#mainColumn { 
    width:50%; 
    left:25%; 
} 
#leftColumn { 
    left:-50%; 
} 

デモ：http://jsfiddle.net/bn3t8/

このコードは非常に基本的で、おそらく上のフルハイト背景用IEの修正やサポートが必要です列。このサイトでいくつか防御戦略をチェックしてみることをお勧めします（強くお勧めします）：

http://matthewjamestaylor.com/blog/perfect-3-column.htm