片方が固定、片方が可変のレスポンシブレイアウトのCSS設定方法
レスポンシブデザインで左側の要素の横幅だ固定、右側がブラウザの横幅によって可変するときのCSSの設定方法です。
下記は、左側の要素が300px、右側の要素が、可変で作成するときのcssの指定です。
スポンサーリンク
html
<div class="wrapper"> <div class="side"> <!-- 固定 --> </div> <div class="main"> <!-- 可変 --> </div> </div>
css
.wrapper {
overflow: hidden;
}
.main {
float: right;
width: 100%;
margin-right: -300px;
padding-right: 300px;
box-sizing: border-box;
}
.side {
float: left;
width: 300px;
}