Html belgemin gövdesi 3 öğe, bir düğme, bir form ve bir tuvalden oluşuyor. Düğmenin ve formun sağa hizalanmasını ve tuvalin sola hizalanmasını istiyorum. Sorun, ilk iki öğeyi hizalamaya çalıştığımda, artık birbirlerini takip etmiyorlar ve bunun yerine yatay olarak yan yana mılar? arada boşluk yok.
#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;ama beni şaşırtan işe yaramadı çünkü sağa hizalamaya çalıştığım öğe göreceli.