Html belgemin gövdesi 3 öğeden oluşuyor, bir düğme, bir form ve bir tuval. Düğme ve formun sağa hizalanmasını ve tuvalin sola hizalı kalmasını istiyorum. Sorun şu ki, ilk iki öğeyi hizalamaya çalıştığımda, artık birbirlerini takip etmiyorlar ve bunun yerine yatay olarak yan yana duruyorlar, işte şu ana kadar sahip olduğum kod, formun sağdaki düğmeden hemen sonra gelmesini ve arada boşluk olmamasını istiyorum.
#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>
Hem formu hem de düğmeyi içeren bir div oluşturabilir, ardından float: right;
ayarını yaparak div'in sağa kaymasını sağlayabilirsiniz.
Böyle mi demek istiyorsun?
/embedded/result,js,html,css/">Form ve düğmeye float:right
ve clear:both;
niteliklerini ekleyebilirsiniz