The html page has the following division struction:
<div id = "p5" class = "p5"></div> <div id = "p5-left" class = "p5-left"></div> <div id = "p5-right" class = "p5-right"></div> <div id = "p5-center" class = "p5-center"></div>
The styles are declared as follows:
.p5 {background-color: pink} .p5-left {float: left; margin-right: 30px; background-color: blue} .p5-center {margin-left: auto; margin-right: auto; background-color: red; text-align:center; width: 200px} .p5-right{float: right; margin-left: 30px; background-color:green}
Observe:
In order to put the various components in the specified division, use code like the following:
canvas = createCanvas(140, 120); canvas.parent('p5-left'); let btnRight = createButton('Button in "p5-right"'); btnRight.parent("p5-right");
(The p5 code was written into this page instead of a separate file. This technique is not normally recommended.)
See also "http://brinkje.com/p5js/HowTo/HowTo/HowToArrangeRowsHTMLComponents.html
For alternative ways to position the canvas, see
https://github.com/processing/p5.js/wiki/Positioning-your-canvas
James Brink, 2/10/2020