I trying to make a div display beside another div using "display: inline". However, I can't seem to make it work. I have a parent div (parent-and-guardian) with 2 divs inside (student-parent-container and student-guardian-other-container). I am trying for this 2 divs to be displayed side by side.
<div id="parent-and-guardian" class="tab">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
</div>
Here is the CSS:
#student-parent-container {
display: inline;
}
#student-guardian-other-container {
display: inline;
}
I'd like for the Guardian Information to be on the right side of Father Information and Mother Information.
Here's a link to jsFiddle: Test
For native-block elements it's better to apply display: inline-block; than element will still take block element display effect (like setting height for inline elements does nothing, while block elements height does change). Also your blocks may lead to different top position on page. That's why I added vertical-align: top (for inline and inline-block elements only):
#student-parent-container {
display: inline-block;
vertical-align: top;
}
#student-guardian-other-container {
display: inline-block;
vertical-align: top;
}
<div id="parent-and-guardian" class="tab">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
</div>
#parent-and-guardian {
display: flex;
}
it will cause it to display side by side. Check out https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Related
I've just recently asked this and it worked previously but now it doesn't again. I have 2 divs (student-parent-container and student-guardian-other-container) I want positioned side-by-side using inline: block and if possible without using float.
Here is the HTML:
<div id="parent-and-guardian" class="tab">
<div id="student-parent-guardian-container">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
</fieldset>
</div>
</div>
</div>
and here is CSS:
#student-parent-container
display: inline-block;
}
#student-guardian-other-container
display: inline-block;
}
Here is a link to a jsFiddle:
Divs not positioning side-by-side
I would like for Guardian Information be on the right side of Father Information.
You didn't open the { in the css rules.
CSS
#student-parent-container {
display: inline-block;
vertical-align: top;
}
#student-guardian-other-container {
display: inline-block;
}
I updated your JS Fiddle, also adding a vertical-align to the guardian div:
https://jsfiddle.net/LinoLinux/7x8xde43/2/
I am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
Newbie Coder here. I'm trying to build a simple form (first, last, email, country), and I have labels corresponding to each. Positioning wise, I want to have the labels ABOVE each input. However, what I'm having some issues with is putting the first and last inputs next to each other (positioned horizontally) while keeping the labels above.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
and the CSS
.firstlast div {
float: left;
clear: none;
display:inline;
}
I can use a linebreak to position the first over the input, but the linebreak still applies to the second label and form.
Any ideas on this?
Thanks!
Try This:
<form name="" method="post">
<div style="float:left;margin-right:20px;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<div style="float:left;">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</form>
And CSS:
input, label {
display:block;
}
You'll need to nest them in their own containers and float them. Or just do the one.
<div id="firstlast" class="grid_8">
<div style="float:left;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
You define .firstlast Class in css . But you used ID in your html code why
-----------------------------------------------------
Now you can try this
Define your label display block in css as like this
label{
display:block;
magin-top:20px;
}
Demo
============================
Try Second Method is this
HTML Code
<div id="firstlast">
<div class="grid_8">
<div class="control-group">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
</div>
<div class="grid_8">
<div class="control-group">
<label for="first">email</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">country</label>
<input type="text" name="last" id="last">
</div>
</div>
</div>
Css
.grid_8{overflow:hidden;margin-top:20px;}
.control-group{
float:left;
width:50%;
}
.control-group label{
display:block;
}
Demo
If i understand your question, you want first label and input field in horizontal and for rest you want label text just above the input field.
Here is the css code should like..
input[type="text"]{
padding:10px;
}
label{vertical-align:top;
padding:10px 0;
display:block;
}
#firstlast {
width:250px;
}
label:first-child, input:first-child{ display:inline; padding:0 5px 0 0;}
HTML should like this.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
<label for="email">e-mail</label>
<input type="text" name="email" id="email">
</div>
And here is the working Demo.
http://jsbin.com/nugucelu/1/edit
I want a form to have three controls in each row. But the width of the control in every row is different(less to be exact). Must I always use columns? Is that regular behaviour of css? Sometimes the css feels like a labyrinth to me
Here's what I have so far:
bootply
<form action="" method="post" role="form" class="form-inline">
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_firstname">First Name</label>
<input type="text" name="firstname" class="form-control" id="id_firstname">
</div>
<div class="form-group">
<label for="id_middlename">Middle Name</label>
<input type="text" name="middlename" class="form-control" id="id_middlename">
</div>
<div class="form-group">
<label for="id_lastname">Last Name</label>
<input type="text" name="lastname" class="form-control" id="id_lastname">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_address">Address</label>
<input type="text" name="address" class="form-control" id="id_address">
</div>
<div class="form-group">
<label for="id_postalcode">Postal Code</label>
<input type="text" name="postalcode" class="form-control" id="id_postalcode">
</div>
<div class="form-group">
<label for="id_city">City</label>
<input type="text" name="city" class="form-control" id="id_city">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_telephone">PHone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
<div class="form-group">
<label for="id_mobile">Mobile</label>
<input type="text" name="mobile" class="form-control" id="id_mobile">
</div>
<div class="form-group">
<label for="id_email">E-mail</label>
<input type="text" name="email" class="form-control" id="id_email">
</div>
</div>
</div>
</form>
Sorry thought you only wanted the link. I also wrapped every .form-group with .col-md-4 but still the width of the inputs differ from each other
From Bootstrap Documentation on Inline Forms
Requires custom widths: Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Just apply the following css if you want all the inputs to be the same size
.form-group {
width: 300px;
}
.form-group input {
width: 300px;
}
bootply with css
OR fix the width of each of your form groups by adding col-md-4 class to each group like this:
<div class="form-group col-md-4">
<label for="id_telephone">Phone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
bootply with classes
I have a two input text
<form action="process.php" method="get">
Link <input placeholder="Link" type="text" name="c">
<p>
<br>
Password <input placeholder="Password Admin" type="text" name="p">
<p>
<br>
<input type="submit">
</form>
result:
How to align in this mode?
like this
Wrap your text inside label elements with divs, and your inputs into another set of divs. Easy to modify their stylings then:
<form action="process.php" method="get" id="yourform">
<div class="labels">
<label for="c">Link</label>
</div>
<div class="inputs">
<input placeholder="Link" type="text" name="c">
</div>
<div class="labels">
<label for="p">Password</label>
</div>
<div class="inputs">
<input placeholder="Password Admin" type="text" name="p">
</div>
<br>
<input type="submit">
</form>
CSS:
.labels {
width: 150px;
text-align: right;
float: left;
margin-right: 5px
}
See the demo - jsfiddle