右サイドバー
可変
固定
float:rightを指定してHTML上で先に右の固定幅領域を記述する場合は簡単ですが、普通は左から記述と思います。
まず、
左側の可変部分にfloatを指定しないと横幅は最大値がとられ、次の領域は右ではなく下になります。
可変
固定
この場合だと、左の可変幅領域の幅がブラウザによって確保される大きさが違い、
場合によっては左の領域内で%指定のwidthを使いたい場合に最大幅分とれなくなります。
また、もし全体の横幅から左の領域の最小幅を引いた残りの幅が右の領域の横幅よりも少ない場合、右の領域は下に落ちます。
可変
固定
参考のため左の領域にwidth:180pxを指定しています。
ブラウザによってpaddingとborderの位置関係が変わるのですが、
左領域のborderが右領域にはみだしても右の領域は落ちずに表示されます。
これで左領域の幅を指定しなければ右の領域は落ちません。
左領域にはpaddingを100px指定しているため、右領域と左領域の文章は重なりません。
左領域に%でmin-widthやwidthを指定すればある程度の横幅を確保できます。
100%-widthが右分の100px未満の場合はブラウザによっては崩れます。
可変
固定
左をwidth:100%; padding-right:100px
右をposition:absolute; top:0px; right:0px; width:100px
してます。
左のwidthが100%ですが、右領域はposition:absoluteでtop:0pxなので重なって表示される。
左のpadding-right:100pxで、領域が重なっても中の文章は重ならない。
これなら崩れることはなく左の可変幅領域に最大幅をとらせられますが、
右にtop:0pxを指定するため、position:relative;な親要素で囲む必要があります。
また、position:absolute;な右領域分の高さは確保されないので
右領域より左領域の方が確実に高さが大きいか親要素で高さを確保する必要がある。