Menu
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?, heres 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"> <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="600" height="600" style="background:lightgray;"> <p>Your browser doesn't support canvas.</p> </canvas> </div> </body> </html>
665
By using flex layout model: Set the display of the parent div to display: flex; and the you can align the child elements inside the div using the justify-content: center; (to align the items on main axis) and align-items: center; (to align the items on cross axis).
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Floats are okay, but problematic with IE 6 & 7.
I'd prefer using the following on the inner div:
margin-left: auto; margin-right: 0; See the IE Double Margin Bug for clarification on why.
123
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
