JSFiddle - React, Tailwind, and code Playground

by Michel Dufour

HTML

<body>
	<div id="DivCanvas">
		<!-- <canvas id="canvas" width=”800” height=”600”></canvas> En fait canvas est créé en javascript dans Astro.js sinon PB proportions -->
		<img src="./images/doudou.bmp" id="doudou"/>
	</div>
 
	<div id="AutreDivFlotant">
		<p>Le Div s'élargie au fur et à messure qu'on ajoute du texte...</p>
		<textarea id="textarea" name="Message"></textarea>
	</div>
</body>

CSS

#DivCanvas {
	width: 800px;
	height: 800px;
}
#AutreDivFlotant {
	position: fixed; top: 2px; right: 4px;
	float: right;
	width: auto;
	height: 800px;
	border: 1px solid blue;
}
canvas {
	border: 1px solid black;
	background-color: #FCFAE1;
}

JavaScript

var DivFloat = document.getElementById('AutreDivFlotant');
var WidthDivFloat = document.getElementById('AutreDivFlotant').offsetWidth;
alert ("WidthDivFloat="+ WidthDivFloat);
DivFloat.setAttribute('width-max', WidthDivFloat);
alert ("Taille du Div flottant="+ document.getElementById('AutreDivFlotant').offsetWidth );