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".
Related
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 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.
I'm wanting to create a form where the input and textarea elements fill the remaining space on the line but do not go to the next line. Here is my current (unworking) jsfiddle https://jsfiddle.net/xz7uq18j/1/
thanks for any help
code:
<div style="border: #000000 thin solid; text-align: left; padding: 10px; margin: 10px; width: 500px;">
Name: <input style="width: 100%"type="text" name="Name" value="Mr John Smith">
Address:<textarea style="width: 100%" name="Address" rows="6" cols="50">1 Road Street
Town
Postcode</textarea> <br>
Primary Phone:<input style="width: 100%" type="text" name="PrimaryPhone" value="***"><br>
Secondary Phone:<input style="width: 100%" type="text" name="SecondaryPhone" value="N/A"><br>
Email Address:<input style="width: 100%" type="text" name="EmailAddress" value="N/A"><br>
</div>
Wrap the two elements you want together on one line in a div, and make that div a flex-box, with the display:flex; property in CSS.
.one-line{
display:flex;
}
<div style="border: #000000 thin solid; text-align: left; padding: 10px; margin: 10px; width: 500px;">
<div class="one-line">
Name: <input style="width: 100%"type="text" name="Name" value="Mr John Smith">
Address:<textarea style="width: 100%" name="Address" rows="6" cols="50">1 Road Street
Town
Postcode</textarea>
</div> <br>
Primary Phone:<input style="width: 100%" type="text" name="PrimaryPhone" value="***"><br>
Secondary Phone:<input style="width: 100%" type="text" name="SecondaryPhone" value="N/A"><br>
Email Address:<input style="width: 100%" type="text" name="EmailAddress" value="N/A"><br>
</div>
Code:
<div id="divPopUp" style="border: 2px solid gray; padding: 20px; width: 700px; background: white; height: 450px; ">
<h1 style="text-align:center">Handsets</h1>
<table>
some table content
</table>
<div class="footerButtons" style="display: block;">
<div style="float: left;">
<input type="button"/>
</div>
<div style="float: left; margin-left: 207px;">
<input type="button"/> <input type="button"/>
</div>
</div>
</div>
I need to put div with class "footerButtons" to bottom of the main div. How can I do it?
I have add position:relative to your main div and position:absolute; bottom:10px to your div with class footerButtons to make it always near the bottom like this
Hope this help!
<div id="divPopUp" style="border: 2px solid gray; padding: 20px; width: 700px; background: white; height: 450px; position:relative">
<h1 style="text-align:center">Handsets</h1>
<table>some table content</table>
<div class="footerButtons" style="display: block; position:absolute; bottom:10px">
<div style="float: left;">
<input type="button" />
</div>
<div style="float: left; margin-left: 207px;">
<input type="button" />
<input type="button" />
</div>
</div>
So, I've got a requirement to have two forms in a dialog, where there are four sections.
I'll attach an image.
I want the first form to contain the orange blocks, and the second form to contain only the green block.
Is there any way to achieve this?
Forms are natively blocks, so that means that if I try, the green block will be put below the bottom-left block, which is now what I want.
In short
.outer {
width: 224px;
}
.inset {
float: left;
margin: 6px;
padding: 6px;
background-color: green;
width: 200px;
}
.outset {
float: left;
margin: 6px;
padding: 6px;
background-color: orange;
width: 200px;
}
<div class="outer" style="width:448px;">
<form action="login.php" method="post">
<div class="outer" style="float: left;">
<div class="outset" style="height: 100px;">Top Left
<input type="text" name="user">
</div>
<div class="outset" style="height: 50px;">Bottom Left
<input type="password" name="password">
</div>
</div>
<div class="outer" style="float: left;">
<div class="outset" style="height: 50px;">Top Right
<input type="submit" value="Login">
</div>
</div>
</form>
<form action="register.php" method="post">
<div class="inset" style="height: 100px;">Bottom right
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" value="Register">
</div>
</form>
</div>