<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>#2</title> </head> <body> <style> /* paste these (the things between the <style> tags) into the css */ /* change anything you like! */ body { font-family: courier, monospace; background-image: url('https://files.catbox.moe/cctgcx.gif') } .scroll { overflow-y: scroll; height:100px; width:400px; padding-left:10px; padding-right:10px; border:1px solid gray; } </style> <div class="container" style="height:100%; width:700px; margin:0 auto;"> <div style="width:700px; background-color:#a79ca8; padding:10px; margin-bottom:5px;"> <h1 align=center>title</h1> </div> <div style="width:200px; height:100%; float:right; padding:5px" title="sidebar"> <a href="#" target="idk"><button style="width:225px; padding-right:5px">button 1</button></a> <button style="width:225px; padding-right:5px">button 2</button> <button style="width:225px; padding-right:5px">button 3</button> <button style="width:225px; padding-right:5px">button 4</button> <button style="width:225px; padding-right:5px">button 5</button> <!-- if you change the height of the other section (the main part), you can insert a div here, play with the height until it's right! --> </div> <div class="scroll" style="width:465px; height:100px; float:left; background-color:#a79ca8; margin-top:5px; white-space:normal;"> <p style="padding:5px">insert updates, information, anything you want gere<br><br><br>ITS SCROLLABLE! change the height if you like!</p> </div> <iframe style="width:700px; height:425px; background-color:#a79ca6; padding:10px; margin-top:5px; border:none; display:block;" name="idk"> </iframe> </div> </body> </html>