I am currently working on a shoe customizer project and facing difficulties in aligning my canvas (using three.js) next to the shoe customizer div. Although I posted the same question earlier, I did not receive a satisfying solution. I made some adjustments based on the responses, but now the canvas appears on top of the div instead of beside it. Please assist.
Main concern: How can I position my canvas-container next to the customizer-container?
HTML
<body>
<img class="logo-image" src="/public/SWEAR-logo.png" alt="SWEAR logo">
<div class="wrapper">
<div class="canvas-container"></div>
<div class="customizer-container">
<img id="close-window" src="/public/close.png" alt="close-window">
<h1 id="name"></h1>
<div class="color-palette-container">
<p>Colors</p>
<div id="color-palette-laces">
<div><div class="box red" style="background-color: red;"></div> Red </div>
<div><div class="box green" style="background-color: green;"></div> Green </div>
<div><div class="box blue" style="background-color: blue;"></div> Blue </div>
<div><div class="box yellow" style="background-color: yellow;"></div> Yellow </div>
<div><div class="box purple" style="background-color: purple;"></div> Purple </div>
<div><div class="box pink" style="background-color: pink;"></div> Pink </div>
</div>
<!-- More color palette elements here -->
<p>Fabrics</p>
<div id="color-fabrics-laces">
<div><div class="box-fabric plastic" style="background-color: red;"></div> Plastic </div>
<div><div class="box-fabric metallic" style="background-image: url('/textures/metallic.jpg');"></div> Metallic </div>
<div><div class="box-fabric polyester" style="background-image: url('/textures/polyester.jpg');"></div> Polyester </div>
<div><div class="box-fabric leather" style="background-color: yellow;"></div> Leather </div>
</div>
</div>
<!-- Size container element -->
<button id="orderButton" disabled>Order now</button>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
CSS
body {
margin: 0;
text-align: center;
font-family: 'Helvetica', sans-serif;
text-transform: uppercase;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrapper {
display:flex;
width: 100%;
}
.customizer-container {
width: 500px;
height: 100vh;
background-color: black;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.canvas-container {
flex: 1;
height: 100vh;
position: relative;
}
Javascript
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const canvas = document.querySelector('.canvas-container');
canvas.appendChild(renderer.domElement);
Current Layout: View Image Here
Currently, both elements are stacked on top of each other. My goal is to have them positioned side by side with the canvas on the left and the customizer on the right without compressing the canvas element.
Link to complete code: Project Repository