前提・実現したいこと
メインバーとサイドバーは指定した広さを保ち、二つのあいだには指定した間を常に開け、メインバーとサイドバー合わせたものをサイトの真ん中に表示したいです。
そして、一定以上ブラウザを縮めるとサイドバーが消えるものが作りたいです。
発生している問題・エラーメッセージ
メインバーの widthを900pxにして、サイドバーの widthを180pxにしているのですが、ブラウザが大きいときは二つともちゃんと並列してメインバー、サイドバーになってくれるのですが、ブラウザの横をどんどん縮めていくと、メインバーの右端とサイドバーの左端が触れたところを境に、サイドバーがメインバーの下に移動してします。
そして、メインバーとサイドバーそれぞれがブラウザの端っこにくっついてしまいます。(実行したいことはメインとサイドをセットと考え、それをサイトの真ん中におくことです。)
該当のソースコード
CSS
1#mainbar{ 2width: 900px; 3padding: 20px; 4border: 1px solid white; 5border-radius: 30px; 6background: white; 7float: left; 8} 9 10#wrapper{ 11 overflow: hidden; 12} 13#sidebar{ 14width: 180px; 15padding: 20px; 16border: 1px solid white; 17border-radius: 30px; 18background: white; 19float: right; 20}
上のコードに書かれてあるIDたちの構図(必要ない部分は省略)は以下の通りです。
html
1<div id="wrapper"> 2 <div id="mainbar"></div> 3 <div id="sidebar"> 4</div>
###質問
どう直せば「実現したいこと」のようなものが作れるでしょうか?教えてくださいm(_ _)m
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。