css - How do I right align div elements? -
the body of html document consists of 3 elements, button, form, , canvas. want button , form right aligned , canvas stay left aligned. problem when try align first 2 elements, no longer follow each other , instead next each other horizontally?, heres code have far, want form follow directly after button on right no space in between.
<!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>
and heres css of now
#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; }
you can make div contains both form & button, make div float right setting float: right;
.
Comments
Post a Comment