ＣＳＳに詳しい方！

質問

ＨＴＭＬとＣＳＳを使って画像（完成図）のようなページを作ろうとしていますが、どうしても失敗例のようになってしまいます。どうすれば完成図のようになりますか。
失敗１→サイドバーにfloat:left;を設定。
失敗２→サイドバーと本文にfloat:left;を設定。

回答No.1

DOUGLAS_

関係のありそうなＷＥＢページをググって、練習なさってみてください。

●レイアウトを区切るタグ
https: //chot.design/html-css-beginner/5cac8c19c5ec/

●CSS floatを初心者向けに図で解説　抑えるべき注意点とは？
https: //udemy.benesse.co.jp/development/web/css-float.html

●floatの解除にclearfixを使って、思い通りのレイアウトに！
https: //qiita.com/mariofujisaki/items/2ad1de8432d7249afadc

★この程度でもイケそうです。
<div style="background: red;">ヘッダー</div>
<div style="background: blue; width: 70%; float: right;">本文<br>本文</div>
<div style="background: green; width: 30%;">サイド</div>
<div style="background: yellow; clear: right;">フッター</div>