left

#left { 
position: absolute; 
left: 2%; 
width: 22%; 
top: 106px; 
background-color: #ffffff;  
}

・Item number 1
・Item number 2
・Item number 3
・Item number 4
・Item number 5

inhalt

WinでIE 6, Firefoxのブラウザテストは行なっています。

※コードはブラウザメニューの「ソースの表示」でご覧下さい。

#inhalt { 
position: absolute; 
left: 25%; 
width: 50%; 
top: 106px; 
background-color: #ffffff;
overflow: auto;
}

overflow: auto;

overflowプロパティは、ブロック要素の内容が指定された幅や高さの領域からはみ出した場合の表示方法を指定します。widthプロパティやheightプロパティにより内容領域を指定されたブロック要素が、指定されたサイズよりも内容が大きなサイズをもつ場合などが対象となります。値には、以下のキーワードを指定できます。

keywords:

■visible･･･overflowプロパティの初期値は「visible」で、これはボックスからはみ出した内容も表示するようにします。
ただし、ボックスの「width」プロパティと「height」プロパティの両方でサイズを指定していた場合です。「width」プロパティ
だけで、「height」プロパティを特に指定していない場合は、内容がボックスからはみ出さないように、ボックスは縦に伸張します。
■hidden･･･ボックスから内容がはみ出た場合、その部分は表示されません。
■scroll･･･ボックスのサイズは変わりませんが、要素の縦横にスクロールバーが表示されて、全体が見られるようになります。
■auto･･･ 「overflow:auto;」とした場合の表示方法は「全体が見られるようにすべきである」という曖昧な指定だけで、
実際の挙動はブラウザに任されています。ただし、多くのブラウザは、ボックスに「height」プロパティを指定していない場合は内容が
収まるように要素の高さが自動的に伸張し、一方、「width」プロパティと「height」プロパティの両方を指定したボックスの場合は、
「overflow:scroll;」と同じようにスクロールバーを出して内容を表示するようです。
 

«-- back

right

#right { 
position: absolute; 
left: 76%; 
width: 22%; 
top: 106px; 
background-color: #ffffff;
overflow: auto;
}

・Item number 6
・Item number 7
・Item number 8
・Item number 9
・Item number 10