My issue involves positioning two side-by-side canvases within a browser window that the user can resize. I want these canvases to remain centered and not wrap when the window is shrunk, but there's a twist - I also need to collect user information through text fields and drop-down menus that seamlessly integrate with the canvas environment, appearing as if they are part of the artwork itself. Achieving this look has proven tricky, even with relative and absolute positions applied to the text fields and menus. I've experimented with nested DIVs for better control over positioning, but the results have been unexpected. As an alternative approach, I'm contemplating aligning the canvases to the left for simplified positioning. Below is the CSS code snippet:
#centerAll {
margin-left:auto;
margin-right:auto;
width:1300px;
}
div.theParent {
position: relative;
}
div.absolute1 {
position: absolute;
top: 70px;
left: 0;
width: 90px;
height: 20px;
}
div.absolute2 {
position: absolute;
top: 120px;
left: 0;
width: 90px;
height: 20px;
}
div.absolute3 {
position: absolute;
top: 120px;
left: 200;
width: 90px;
height: 20px;
}
body{
background-repeat: no-repeat;
background-position: left;
}<script type="text/javascript" src="javascriptFile.js"></script>
<div class="parent">
<div class="absolute1">
<input type="text" id="letteringText" value="one line of text">
</div>
<div class="absolute2">
<select id="select something">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</select>
</div>
<div class="absolute3">
<select id="select some more">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</select>
</div>
</div>
<div id="centerAll">
<canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas>
<canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas>
</div>