मेरे HTML डॉक्यूमेंट के मुख्य भाग में 3 तत्व, एक बटन, एक फॉर्म और एक कैनवास है। मैं चाहता हूं कि बटन और फ़ॉर्म सही संरेखित हों और बाईं ओर संरेखित रहने के लिए कैनवास। समस्या यह है कि जब मैं पहले दो तत्वों को संरेखित करने की कोशिश करता हूं, तो वे अब एक दूसरे का अनुसरण नहीं करते हैं और इसके बजाय क्षैतिज रूप से एक दूसरे के बगल में होते हैं ?, मेरे पास अब तक का कोड है, मैं चाहता हूं कि फॉर्म सीधे दाईं ओर बटन के बाद का पालन करें बीच में कोई जगह नहीं है।
#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;
लेकिन वह काम नहीं किया जिसने मुझे आश्चर्यचकित किया क्योंकि मैं जिस तत्व को सही करने की कोशिश कर रहा हूं वह सापेक्ष है।