html - ブラウザが小さくなったときに右の列を左の列の真ん中に浮かせるにはどうすればよいですか

Question

ブラウザーが小さくなっているときに、右の列を左の列の中央に移動するにはどうすればよいですか?

1番目と2番目のブロックの間に浮かせたいです。

CSS:

#leftcol{
    float:left;
    background:#039;
    width:300px

}
#rightcol{
    float:left;
    background:#3C0;
    width: 70%
}

#first{
    background:#F00;
    width:100%
}
#second{
    background:#666;
    width:100%
}

HTML:

<div>
  <div id=leftcol>leftcol
    <div id=first>first block</div>
    <div id=second>second block</div>
  </div>
  <div id=rightcol>rightcol</div>
</div>

Answer 1

HTML を変更します。

<div id=first>first block</div>
<div id=rightcol>rightcol</div>
<div id=second>second block</div>

この CSS を使用します。

#rightcol{
  float:left;
  background:#3C0;
  width: 70%;
}
#first{
  float:left;
  background:#F00;
  width: 300px;
  clear: both;
}
#second{
  float:left;
  background:#666;
  width:300px;
  clear: both;
}

jsフィドル