Organizing elements of a web page into columns can actually be quite difficult. Two common solutions to the problem are using bootstrap and flexbox.
I use Bootstrap because I am already familiar with it, its sort of the holygrail of HTML/CSS/JS frameworks. Your gonna need to learn some basic familiarity with bootstrap before understanding and working with the resource Im going to point you to. This is well worth the time though, it will make your life much easier. Heres an explanation on using the Bootstrap grid system http://getbootstrap.com/examples/grid/. Also check out youtube video tutorials, there are also some great tutorials on lynda.com.
Edit: Heres how I’d go about doing it. First add Bootstrap to your website, easiest way is with a CDN so you can just add a link to the top of your page (although not necessarily the best way to do it). Many resources online on how to add bootstrap.
heres the html code to get you started (this will work when you add bootstrap):
<div class="row">
<div class="col-xs-6" id="title">
<h1>Knight's Tour</h1>
</div>
<div class="col-xs-6" id="info">
<p>adssdfksdafhsadkhfkashdfksahdkfhakdshfkasdhfkhaskf</p>
</div>
</div>
<div class="row">
<div class="col-xs-12" id="table">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
Also notice that bootstrap handles all the responsiveness for different size screens.
4
solved How do you position div’s in html5? [closed]