Badan dokumen html saya terdiri dari 3 elemen, tombol, formulir, dan kanvas. Saya ingin tombol dan formulir selaras kanan dan kanvas tetap selaras kiri. Masalahnya adalah ketika saya mencoba untuk menyelaraskan dua elemen pertama, mereka tidak lagi saling mengikuti dan sebaliknya bersebelahan secara horizontal ?, inilah kode yang saya miliki sejauh ini, saya ingin formulir mengikuti langsung setelah tombol di sebelah kanan. tanpa ruang di antara keduanya.
#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;tetapi itu tidak berhasil yang mengejutkan saya karena elemen yang saya coba selaraskan ke kanan adalah relatif.