CODEWITHSUNDEEP
htmlcssbrowserpositionstyling
user12105861
user12105861

Reputation:

How to position div next to HTML5 canvas

I am trying to create a web based paint software, and want to position a button to change the color of the paint brush (I will eventually change this to a bar). How would I position the button on the right of the canvas.

Html and css:

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>Paint</title>
    <style>
        #canvas{
            background-color: cadetblue;
        }
        .button{
           /* code to position button next to canvas */
        }

    </style>
</head>
<body>
    <canvas id = "canvas" width = "800" height = "600"></canvas>
    <div class = "button">RED</div>
</body>
</html>

Upvotes: 2

Views: 1729

Answers (1)

giuseppedeponte
giuseppedeponte

Reputation: 2381

<canvas> is just a normal block element, so you can position it however you will position a block element. You can apply float:left on the canvas & the button (please use a real <button>), you can display:inline-block them, you can add a wrapper around them and display: flex it, or even display: grid it or add position: relative to it and position: absolute to its children. There are lots of ways to achieve this. Here is a good starting point: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

Upvotes: 1

Related Questions