誰か助けてもらえますか？
HTMLとCSSで次のレイアウトを実行しようとしています。この画像は、Webサイトの一般的なレイアウトを大まかに表したものです。
トップバー（またはヘッダー）はたとえばライトグレーになり、サイドバー1は同じ色になります。サイドバー1の左下隅も丸みを帯びており、サイドバー2の右上隅も丸みを帯びています。私が再現しようとしている効果は、ヘッダーがサイドバー1に「流れ込み」、サイドバー2がフッターに「流れ込み」ます。これまでのところ、ボックスが接触しているように見えるようにコード化しており、角を丸くしています。しかし、私が一日中立ち往生しているのは、1が次の色に流れ込んでいるように見えるように色を調整する方法です。これは私がこれまでに持っているものの例です（私は形などをブロックしようとしているだけなので、まだ非常にラフです）hansmoolman.com
上記のWebサイトの関連セクションは、「これはメインコンテナーです」と呼ばれるセクションで、ページの約半分にあり、サイドバー1（Twitterフィードを含むもの）とサイドバー2（すべてのLorenm Ipsumを含むもの）が含まれています。もの）。トップバーはロゴとナビゲーションのものが付いたものになります。フッターはまだ実装されていません。
誰かが私がこれを行う方法を提案できますか？サイドバー1と2は動的に成長でき、コンテンツが追加された場合は互いに独立しているため、これを表す背景画像を避けようとしています。または、これを背景画像で行うことはできますか？
私が取り組んできたすべてのソリューションは、他のボックスの内側と上部にボックスがあり、非常に乱雑になっているので、誰か助けてください。コード的には見栄えがよくなく、すべてのデバイスで意図したとおりに表示されない可能性があるのではないかと心配しています。
この質問についてより明確にするかコードが必要な場合は、私に知らせてください。両方を提供できます。
前もって感謝します
*編集-これはflemによって提案された可能な解決策です
