0

FC2ブログのCSSに関する質問です。 /* =Layout
------------------------------------------------- */

#header {
width: 100%;
position: relative;
}

#vpass {
width: 750px;
margin: 20px auto;
}

#wrap {
width: 100%;
min-width: 850px;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
}

#wrap:after {
content: "";
overflow: hidden;
display: block;
clear: both;
height: 0;
}

/**/
* html #wrap {
overflow: visible;
height: 1%;
}
/**/

#container {
float: left;
width: 100%;
margin: 0px -220px 0px 0px;
padding: 0px;
}

#main {
margin: 0px 220px 0px 220px;
}

#block {
float: right;
width: 100%;
margin: 0px 0px 0px -220px;
}

#menu1 {
float: left;
width: 200px !important;
width /*for IE5.5*/: 220px;
padding: 0px 20px 20px 0px;
overflow: hidden;
}

#menu2 {
float: right;
width: 200px !important;
width /*for IE5.5*/: 220px;
padding: 0px 0px 20px 20px;
overflow: hidden;
}

#footer {
clear: both;
width: 100%;
position: relative;
overflow: hidden;
}



/* =Header
------------------------------------------------- */

このようなレイアウトになっており、大きな画像を入れるため、
menu1（左サイドバー）の大きさを350pxにしたいと思っています。

その際、containerとmainのmargin（左サイド）を同様に広げる為に370にしたのですが、
左サイドバーだけ下に落ちてしまいます。（以下のような設定にしています）

どのようにすれば、３カラムのどれも落ちる事無く
綺麗に収まるのでしょうか。

私はCSSやHTMLについて無知なので、
その点も踏まえて皆様の回答をお待ちしてます。
よろしくお願いします。

ーーーーーーーーーーーーーーーーーー
#container {
float: left;
width: 100%;
margin: 0px -370px 0px 0px;
padding: 0px;
}

#main {
margin: 0px 370px 0px 220px;
}

#block {
float: right;
width: 100%;
margin: 0px 0px 0px -220px;
}

#menu1 {
float: left;
width: 350px !important;
width /*for IE5.5*/: 220px;
padding: 0px 20px 20px 0px;
overflow: hidden;

質問者が選んだベストソリューション

Yahoo!知恵袋 4307日前