HTML/CSSを使ってホームページを作ろうとしています。
やりたいこととしては、
[left-row] | [main]
を全画面でレスポンシブルに表示したいのです。(|はborder
です)
以下の画像はやりたいことです。
しかし、以下のコードで
<body> <div class="content"> <div class="left-row"> </div> <div class="main"> </div> </div> </body> </html>
としてCSSは
.left-row { float: left; background-color: pink; height: 100%; width: 20%; border-right: solid 2px black; } .main { overflow: hidden; background-color: skyblue; height: 100%; width:80%; }
をするとleft-row
は正しく左に表示されるのですが、main
の方は、下に隠れてしまいます。
widthで%指定していることと、borderが競合しているのはわかるのですが、どのようにしたらいいのかわかりません。
初心者なので丁寧に教えてくださると助かります。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/28 14:55