I am trying to align 2 divs horizontally inside one div.
Here is codepen link Check Here. When I add margin-top to left div it is not moving up.
What am I doing wrong?
<footer id="contact">
<div class="reservation" style="display: block;border:1px solid red; ">
<div class="reserve-address-div" style="display: inline-block;width:45%;border:1px solid red;margin-top:-40px;">
<h4>51 Area, Barmuda Triangle, Mars</h4>
<h4>0165466546</h4>
<h4>vivek.tarun17#gmail.com</h4>
</div>
<div class="reserve-booking-div" style="display: inline-block; width:45%;border:1px solid red; ">
<form>
<input type="text" name="name" placeholder="Name" /><br>
<input type="email" name="email" placeholder="Email"/><br>
<input type="text" name="subject" placeholder="Subject"/><br>
<textarea placeholder="message" rows="5"></textarea><br>
<input type="button" value="Submit">
</form>
</div>
</div>
</footer>
Please try to use vertical-align: top something like this:
<div class="reservation">
<div class="reserve-address-div" style="display: inline-block; ... vertical-align:top">
...
</div>
<div class="reserve-booking-div" style="display: inline-block; ... vertical-align:top">
...
vertical-align property is useful.
You can put inline-blocks along with the top of parent element, e.g., div.
The reason .reserve-address-div is being pushed down is because the default vertical-align value is set to baseline. As another poster mentioned, setting the vertical-align property to top for .reserve-address-div will remove the space above that div.
You can read more about the issue here.
An alternate solution would be to use flexbox on the .reservation container, as I've demonstrated in the snippet below.
Hope this helps!
.reservation {
border: 1px solid red;
display: flex;
align-content: center;
justify-content: center;
width: 100%;
}
.reserve-address-div {
display: inline-block;
width: 45%;
border: 1px solid red;
}
.reserve-booking-div {
display: inline-block;
width: 45%;
border: 1px solid red;
}
<footer id="contact">
<div class="reservation">
<div class="reserve-address-div">
<h4>51 Area, Barmuda Triangle, Mars</h4>
<h4>0165466546</h4>
<h4>vivek.tarun17#gmail.com</h4>
</div>
<div class="reserve-booking-div">
<form>
<input type="text" name="name" placeholder="Name" /><br>
<input type="email" name="email" placeholder="Email" /><br>
<input type="text" name="subject" placeholder="Subject" /><br>
<textarea placeholder="message" rows="5"></textarea><br>
<input type="button" value="Submit">
</form>
</div>
</div>
</footer>
How about the Flexbox solution:
.reservation {
display: flex;
padding: 2.5px;
border: 1px solid red;
}
.reserve-address-div, .reserve-booking-div {
flex: 1;
margin: 2.5px;
padding: 5px;
border: 1px solid red;
}
<footer id="contact">
<div class="reservation">
<div class="reserve-address-div">
<h4>51 Area, Barmuda Triangle, Mars</h4>
<h4>0165466546</h4>
<h4>vivek.tarun17#gmail.com</h4>
</div>
<div class="reserve-booking-div">
<form>
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="Email"><br>
<input type="text" name="subject" placeholder="Subject"><br>
<textarea placeholder="message" rows="5"></textarea><br>
<input type="button" value="Submit">
</form>
</div>
</div>
</footer>
Adjust margins and padding to your needs.
Related
I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.
form {
margin: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
add text-align: center; to the form tag
form {
margin: auto;
text-align: center;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname">
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com">
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com">
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.
HTML
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<div class="form-center">
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<div class="form-center">
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</div>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
CSS
form {
margin:auto;
}
div.form-center {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
form {
/*margin: auto; Not required as long as you didn't specify the width of the form*/
text-align: center;
}
fieldset {
/*centering the fieldset horizontally*/
margin: 1em auto;
...
}
You may want to use Flexbox.
On the fieldset selector add the following 3 lines of code:
display: flex;
flex-direction: column;
align-items: center;
Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.
Your example would then remain the same, only for the fieldset selector you have the following css properties:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em auto;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.
I have this few line of html code i want to arrange the label and input side by side with the label on top of the input with css but am not able to work around it. I found similar question herewhich suggest use of display:inline-block; to achieve that but after including it in my code an not able to do it.
body {
background-color: red;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="" , method="">
<div id="styleform">
<label for="NAME">   FIRST NAME</label></br>
<input type="text" id="NAME" size="20"></br>
</br>
<label for="no">   NUMBER</label></br>
<input type="number" id="no" , size="45"></br>
</br>
<label for="age">   AGE</label></br>
<input type="number" id="age" size="45"></br>
</br>
<label for="S_NO:">   CODE</label></br>
<input type="text" id="S_NO:" size="20"></br>
</br>
</div>
</form>
</div>
I think this kind of easy question for some of you this new be in web development
This how i want it to look like
UPDATE
Updated fiddle after image provided
#LAS You are inserting line breaks, that is part of the problem. I have created this fiddle, fixing several things: https://jsfiddle.net/Lu5k1yk8/6/
Added ; after your spaces
fixed the line breaks (I believe the syntax should be <br> or <br />, not </ br> and removed them after labels
Changed your CSS for the textboxes to inline-table
Increased width of labels so they do not create new lines
Also, I would suggest not using spaces (nbsp;) or <br />'s and instead using CSS to create the correct spaces and line breaks.
Here is a good demonstration of how to use padding and margins: http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html
Just remove br tag and add this to your code
input[type="text"] + label {
display: inline;
}
I think the best way is to take the label and input in a table.enter code here<table>
<tr><th>label</th><td><input type="text"></td></tr></table>
I changed your code a bit, I hope this is what you are looking for:
I set label into an inline-block element and set its min-width to 150px, and removed the margin-left: 150px;.
Also, if you use  , you need to add a semicolon at the end of it: , and with the </br> you need to add the slash at the end: <br />
body{
background-color: red;
}
label {
display: block;
min-width: 150px;
}
.test {
display: inline-block;
width: 45%;
background-color: white;
border: solid 1px blue;
padding: 5px 10px;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="", method="">
<div id="styleform">
<div class="test">
<label for="NAME" >FIRST NAME</label>
<input type="text" id="NAME" size="20"><br /><br />
</div>
<div class="test">
<label for="no" >NUMBER</label>
<input type="number" id="no", size="45"><br /><br />
</div>
<div class="test">
<label for="age" >AGE</label>
<input type="number" id="age" size="45"><br /><br />
</div>
<div class="test">
<label for="S_NO:" >CODE</label>
<input type="text" id="S_NO:" size="20"><br /><br />
</div>
</div>
</form>
</div>
**EDIT: ** I have changed the code. Hope this helps you this time ;)
Hope this helps.
Do you mean something like this?
.block {
display: block;
}
.inline-block {
display: inline-block;
width: 49%;
}
body {
padding: 10px;
}
<div id=tk>
<form action="" method="">
<div id="styleform">
<div class="inline-block">
<label class="block" for="NAME">FIRST NAME</label>
<input class="block" type="text" id="NAME" size="20">
</div>
<div class="inline-block">
<label class="block" for="no">NUMBER</label>
<input class="block" type="number" id="no" , size="45">
</div>
<div class="inline-block">
<label for="age" class="block" >AGE</label>
<input type="number" class="block" id="age" size="45">
</div>
<div class="inline-block">
<label class="block" for="S_NO:">CODE</label>
<input type="text" class="block" id="S_NO:" size="20">
</div>
</div>
</form>
</div>
I am creating a form for a landing page, so I want to keep the text input field side by side so I don't make the form very long.I trying to do something like this :
But it seems really difficult right now, this is what my form current looks like:
.teaser-right {
float: right;
width: 45%;
margin: 3% 0 0 0
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
Add this to your CSS:
.form-section{
display:inline-block;
}
To put 2 input fields beside each other you can use of float. if you float the elements you need to make sure you use the clearfix hack on the parent div. Otherwise the parent div won't have a height.
Another option is to use display: inline-block If you use display inline-block you need to reset the font-size on the parent to 0. The elements that where you use display: inline-block need to get the font-size: 12px; for example. With display inline-block you can get a slight height difference.
Example:
float: left;
https://jsfiddle.net/ymma61hu/3/
Clearfix hack:
https://css-tricks.com/snippets/css/clear-fix/
Example 2:
display: inline-block;
https://jsfiddle.net/vh49gtzL/
Hi just put input elements inside same div see fiddle. https://jsfiddle.net/v5omym1a/
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
I cleaned up your markup a bit. You don't need to wrap your <h3> and <h4> in div-s - those are block level elements as well and can be perfectly styled.
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0;
overflow: hidden;
}
.form-section {
float: left;
width: 50%;
}
label {
display: block;
margin-bottom: .25em;
}
<div id="calltoaction-form" class="teaser-form">
<h3 class="form-title">sample form</h3>
<form id="contact_form" action="_contact-us.php" method="post">
<h4 class="form-header">Personal details</h4>
<div class="form-section">
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<label for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</form>
</div>
.form-section {
float: left;
margin: 1%;
width: 48.5%;
}
.form-section input {
width: 100%;
}
.form-section:first-child {
margin-left: 0;
}
.form-section:last-child {
margin-right: 0;
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 100%;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-container">
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</div>
I have 2 divs that I want to position close together, however they keep moving eachother. They are both under the main div.
HTML:
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
The CSS is as follows:
Main body which both divs comes under:
#main {
padding-top: 50px;
}
Form div:
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
margin-top: 150px;
}
Error div:
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
I know that perhaps it has something to do with the position attribute..
Here is an image of what it looks like now, as you can see, I want both of the center objects to be close together without pushing each other away from the vertical center.
remove the margin-top from the #signin div - as this is what is putting pixels between the #notif div and the #signin div.
#main {
padding-top: 50px;
}
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
}
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
Debugging
In this sort of situation, your page inspector is going to be your best friend.
In chrome, for example, when the page inspector is open, hovering an element will show you the margins of the element, as well as any padding being given to it.
I have 2 DIVs. Something like below:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
</div>
And then css I am using is given below:
.leftcolumn { width: auto; border: 1px solid red; float: left}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
Given below a screenshot for the issue I'm facing:
change css to:
.leftcolumn { width: auto; border: 1px solid red; margin-right: 204px;}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
and replace right and left in html:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
</div>
SEE FIDDLE
Instead of using a float for the left column, why not set the right margin to 200px (or 210px if you want some spacing);
.leftcolumn { margin-right: 210px; border: 1px solid red}
This will allow the right column to float into place within the margin.
You will also need to reverse the order of the divs in your html. You want the right column to come before the left. This will give you the fluid layout you want regardless of the width of "myForm".