Code:
<div id="Rise">
<div class="box-top"> <div class="name">Tagebuch</div> </div>
<div class="box-rights">
<div class="quest b">Was ich erlebt habe.</div>
<div style="margin: 0px; height:200px; overflow:auto;">
<div class="quest a"><u>Datum | Playpartner | Ort</u></div>
Was ist passiert?
<div class="quest a"><u>Datum | Playpartner | Ort</u></div>
Was ist passiert?
<div class="quest a"><u>Datum | Playpartner | Ort</u></div>
Was ist passiert?
</div>
</div>
</div>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'><style type="text/css"> /*
GRUNDGERÜST
*/ #Rise { border: 5px solid #100a1b; width: 500px; background: #332a53; overflow: hidden; margin: auto;}/*
OBERE BOX MIT BILD, NAME UND TEXT
*/ #Rise .box-top {float: left; width: 500px; box-sizing: border-box; padding: 8px; font-size: 8px; background: #282144; } #Rise .box-top > img {float: left; padding: 2px; margin-right: 8px; border: 3px solid #fff;} #Rise .name {text-align: left; font-family: Lato; font-weight: 700; line-height: 35px;text-transform: uppercase; font-size: 27px; color: #7c8566; letter-spacing: -1px; word-spacing: 3px; text-shadow: #736950 1px 1px 0px;} #Rise .text-top {font-family: Lato; font-weight: 400; color: #c1cba8; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; text-align: justify;line-height: 8px;} /*
LINKE BOX FÜR QUICKFACTS
*/ #Rise .box-left {float: left; width: 130px; margin: 5px; padding: 5px; box-sizing: border-box;} #Rise .quest {display: block; padding: 2px; color: #7c8566; text-transform: uppercase; font-family: Lato; font-weight: 700; letter-spacing: 1px; font-size: 9px;} #Rise .a {border-left: 3px solid #a1cba8; border-bottom: 1px dotted #100a1b; } .b {border-left: 12px solid #100a1b; border-bottom: 1px solid #a1cba8; } #Rise .ans {display: block; background: #332a53; color: #c1cba8; padding: 2px; font-size: 10px; font-family: Lato; font-weight: 400; margin-bottom: 3px; }/*
RECHTE BOX FÜR DEN INHALT
*/ #Rise .box-rights {float: left; width: 480px; margin: 5px; padding: 5px; box-sizing: border-box; background: #282144; margin-bottom: 3px; color: #c1cba8; font-family: Lato; font-weight: 400; font-size: 10px; letter-spacing: 1px; line-height: 12px; text-align: justify;} #Rise .box-right b, #Rise .box-right i, #Rise .box-right u, .box-right s {color: #c1cba8; font-family: Lato; font-size: 11px; letter-spacing: 1px;} #Rise .fact {margin: 4px auto; padding: 4px 0px; border-top: 1px dotted #100a1b; border-bottom: 1px solid #c1cba8; width: 90%;} #Rise .box-right p {height: 400px; overflow: auto;} #Rise .box-right p::-webkit-scrollbar {width: 4px; background: #f3f3f3;} #Rise .box-right p::-webkit-scrollbar-track {background: #f3f3f3;} #Rise .box-right p::-webkit-scrollbar-thumb {background: #100a1b; width: 4px;}/*
*/xx RUNNING LOW by ljusblå @ storming gates /*
</style>