El cuerpo de mi documento html consta de 3 elementos, un botón, un formulario y un lienzo. Quiero que el botón y el formulario estén alineados a la derecha y que el lienzo permanezca alineado a la izquierda. El problema es que cuando trato de alinear los dos primeros elementos, ¿ya no se siguen entre sí y, en cambio, están uno al lado del otro horizontalmente ?, aquí está el código que tengo hasta ahora, quiero que el formulario siga directamente después del botón a la derecha sin espacio en el medio.
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="1000" height="600">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>
margin-left: auto;pero no funcionó, lo que me sorprendió porque el elemento que estoy tratando de alinear a la derecha es relativo.