I have a canvas and a div element that I need to split in a 60% to 40% ratio. However, no matter what changes I make to the display settings, the div is always displayed before the canvas.
The Div element contains buttons with color-changing properties for the canvas element.
<div id = "ModelArea1">
<div id = "Model1">
<canvas id ="scene1" style="width: 100%; height:100%;">
</canvas>
</div>
<div id ="SelectionArea1">
<button type ="button" class ="ButtonFormat" onclick =displayVariations()>Fabric Textures</button>
<div class = "FabricTectureOptions" style="display:none;">
<div class ="Fabric1">
</div>
<div class ="Fabric2">
</div>
</div>
<button type ="button" class ="ButtonFormat" onclick =displayVariations()>Leather Textures</button>
</div>
</div>
.Fabric1{
background-image: url("https://i.ibb.co/B2kPznR/Fabric-Upholstery-Moss-Plain-Weave001-AO-1-K.jpg");
height: 50px;
width: 50px;
border-radius: 10px;
display: inline-block;
}
.Fabric2{
background-image: url("https://i.ibb.co/kKZRpdm/Fabric-Upholstery-Moss-Plain-Weave001-COL-VAR3-1-K.jpg");
height: 50px;
width: 50px;
border-radius: 10px;
display: inline-block;
}
.ButtonFormat{
background-color: #eee;
color: #444;
cursor: pointer;
padding: 5px;
border-style: none outset outset none;
outline: none;
font-size: 12px;
}
.FabricTectureOptions{
padding: 0 18px;
overflow: hidden;
background-color: #f1f1f1;
border-radius: 10px;
}
#ModelArea1{
width:100%;
display:inline-flex;
}
#Model1{
width: 60%;
}
#SelectionArea1{
width: 40%;
}
I want both the canvas and div elements to have the same height and width and be positioned side by side like this:
| Canvas | Div |
| | |
| | |
Question 1: How can I achieve this alignment correctly?
Question 2: Is it necessary to wrap the canvas in a div to achieve this layout, or is there an alternative method?
Here is the codepen link for reference: https://codepen.io/FarhaNaseem/pen/eYgKJZW