0 votes
1 view
in Web Technology by (22.4k points)

The body of my HTML document consists of 3 elements, a button, a form, and a canvas. I want the button and the form to be right-aligned and the canvas to stay left-aligned. The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, here's the code I have so far, I want the form to follow directly after the button on the right with no space in between.

#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">


  <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" />


<body bgcolor="000" TEXT="FFFFFF">

  <div id="button">

    <button onclick="showForm()" type="button" id="cTask">

        Create Task



  <div id="addEventForm">


      <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>




    <canvas id="myBoard" width="1000" height="600">

      <p>Your browser doesn't support canvas.</p>





1 Answer

0 votes
by (40.3k points)

You can try making the div that contains both the form & the button. After that you can make the div float to the right by setting 

float: right;

Related questions

Welcome to Intellipaat Community. Get your technical queries answered by top developers !