HPレイアウトをCSS3に対応しました

HP:Jumble Junk

レイアウトとかをCSS2で作っていたけど、CSS3を勉強してたら、もっと楽に出来る事を知ったので、対応しました。

 #container {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

body > #container {
    height: auto;
}

#contents{
    padding-bottom: 40px;
}

#menu_block{
    background-color:#f7f8da;
    width : 200px ;
    float:left;
    padding-bottom: 32768px;
    margin-bottom: -32768px;
}

#contents_block{
    margin-left: 200px;
    padding-bottom: 32768px; 
    margin-bottom: -32768px;
}

↓

 #container {
    height: 100%;
    margin: 0px auto;
}
#contents{
    display:box;
        display:-moz-box; display:-webkit-box;
    box-orient:inline-axis;
    width : 100% ;
}

#menu_block{
    background-color:#f7f8da;
    width : 200px ;
}

#contents_block{
    box-flex:1.0;
        -moz-box-flex:1.0; -webkit-box-flex:1.0;
}

今まで、marginとpaddingを組み合わせたりして、ごちゃごちゃしてたのがすっきり＾＾
prefixがつけないといけないから、まだ完全にスッキリはしてないけど

てことで、見た目としては、全く変わってません＾＾；
ついでに横幅だけ変えたけど
久しぶりに、HP見たら、「6ヶ月以上更新のないページにつく広告」があって少し焦った

次は、ブログのテンプレート！
ちまちま作成中