HTML：固定列+液体列逆順

Question

私は固定+液体列レイアウトの作成方法を知っています（オンラインでも多くの例があります）。しかし、残念ながら、私が知っているすべての例は、およそ最初の固定列を持っているし、HTMLコード内の流体柱、このような何か：

<div class="my-layout"> 
    <div class="my-fixed-col">This is fixed column</div> 
    <div class="my-fluid-col">This is fluid column</div> 
</div> 

は、誰かが私にでこのレイアウトを作成する方法の方法を提供することができ流体柱HTMLの最初の、その後固定し、このような何か：ところで

<div class="my-layout"> 
    <div class="my-fluid-col">This is fluid column</div> 
    <div class="my-fixed-col">This is fixed column</div> 
</div> 

、固定列は左側にあります。それを行うための

理由：

• マイ<h1>タグは流体の列にあるので、私はそれを持っているしたいと思い応答デザインの目的のためにページ
• のトップに 近い私が希望 は、小さなスクリーンの上に液体カラムを持つことが好きです。

Answer 1

この1つを試してください。流体と固定プラスヘッダーとフッターが含まれています。

HTML：

<div class="wrapper"> 
    <div class="header"> 
      header 
    </div> 
    <div class="wrapleft">  
     <div class="left"> 
      left 
     </div> 
    </div>  
     <div class="right"> 
      right 
     </div> 
     <div class="footer"> 
      footer 
     </div>  
</div> 

CSS：

body { 
    padding: 0px; 
    margin: 0px; 
} 
.wrapper{ 
    width: 100%; 
    margin: 0 auto; 
} 
.header{ 
    float: left; 
    width: 100%; 
    background-color: #f4f4f4 
} 
.wrapleft{ 
    float: left; 
    width: 100%; 
    background-color: #cfcfcf 
} 
.left{ 
    margin-right: 243px; 
    background-color: #afeeee; 
    height: 200px; 
} 
.right{ 
    float: right; 
    width: 233px; 
    margin-left: -233px; 
    background-color: #98fb98; 
    height: 200px; 
} 
.footer{ 
    float: left; 
    width: 100%; 
    background-color: #f4f4f4; 
}