サイドバーを自動にすると下のデザインが反映されない

質問

初めて質問いたします。
もしよろしければ、お返事いただけると幸いです。

「サイドバーを、メイン部分と同じ長さにしてほしい」とのことだったので、以下のCSSを書きました。

/* main + sideをくくる */
.wrapper
{
overflow: hidden ; /* floatを解除する */
}

/* サイドバー */
.side
{
padding-bottom: 10000px;
margin-bottom: -10000px;
}

ところが、このサイドバーの四隅を丸めてほしいとのことだったので、以下のCSSを追加しました。

/* サイドバー */
.side
{
border-radius: 7px/20px; /* 角を丸める */

padding-bottom: 10000px;
margin-bottom: -10000px;
}

このようにしたのですが、下はどうしても丸められません。

ボディも同様に角を丸めるようにとのことだったので、そちらも同じように書いたら、四隅をきちんと丸められました。

.main_contents
{
border-radius: 7px/20px;
}

おそらく、サイドバーの10000pxあたりで丸まっているのだろうが、表示されないので、途中で切れたような形なのだと想像はできました。
しかしこの場合の解決ができません。

どなたか、よい方法をご存じないでしょうか。
よろしければ、教えてください。

よろしくお願いいたします。

回答No.1

H240S18B73

なかなかやり方が乱暴ですねぇ

角丸してくれってことはもうCSS3でやっていいってことだろうし
高さを揃えるのはflexでやるといいかもですよ

お礼

ご丁寧に、お返事ありがとうございます。
flexを使ってみることにします。
ありがとうございました。