I have two divs in which they should be side by side. But once I add a padding to the input box in the left div, the right div shifts.
Any idea why?
The html and css is in the fiddle as below
<div style="text-align:center">
<div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>NEW USER</u></div>
<div style="
/* text-align: left; */
padding-top: 20px;
width: 100%;
">
<input type="text" name="email" id="email" placeholder="(Email)" style="
width: 90%;
/* margin: 10px; */
height: 30px;
">
</div>
</div>
<div style="display:inline-block;width:350px;height:200px;background-color: rgba(193, 89, 97, 0.61);margin-left:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961;"><u>EXISTING USER</u></div>
<div>
<input type="text" name="email" id="email" placeholder="(Email)">
</div>
</div>
</div>
http://jsfiddle.net/cAJgq/
Add vertical-align: top to the div styles
Your code aren't clean... Put your css into css file it's better to see clearly your html code
<div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>EXISTING USER<</u></div>
<div style="padding-top: 20px;width: 100%;">
<input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;">
</div>
</div>
<div style="display:inline-block;width:350px;height:200px;background-color:red;margin-right:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961"><u>NEW USER</u></div>
<input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;margin-top: 20px;">
</div>
http://jsfiddle.net/cAJgq/1/
Related
I have a row of divs:
row of divs
When I decrease the window size they move down and stack on top of one another
divs stacked on top of one another
another example of the divs stacked
Instead of having them move down one by one as the window size gets smaller I want them to all move down together to the next row like so:
how I would like the divs to display
How would I go about doing this using divs? or if there is another method (like flex boxes) please let me know. Thanks!
Here is all the relevant code:
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:white;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
CSS:
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
you need to consider a few points
you need to make div responsive in small screen devices by adding col-12 before col-md-6.
if you're using bootstrap then learn it well and you don't need to use inner css.
replace this:
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
with this:
<div class="col-12 col-md-6 pricing-boxes">
<div class="pricing-box"><h2><b>$1495</b></h2><h6>MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$1495</b></h2><h6>NON-MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$2000</b></h2><h6>VIPS</h6></div>
</div>
Use #media and when size of screen is reduced to specific size then apply width: % to class .pricing-boxes like used in below snippet.
Use padding and margins according to need
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
#media screen and (max-width: 900px) {/*Value may be from where it start stacking*/
.pricing-boxes{
width: 100%;
/*adjust padding and margin according to need*/
}
}
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:black;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">MEMBERS</p>
</div>
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p>
</div>
<div class="pricing-box">
<p style="font-size:50px"><b>$2000</b></p>
<p style="font-size:23px; margin-top:-30px">VIPS</p>
</div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
I'm developing a Java Spring Boot Web App, but CSS is not my specialty. I've attached two images. One is the login page before an attempted login, and the next is after a failed attempted login. The issue is that after the text showing the failed login is added to the page, for some reason, the size of the input fields gets larger. I'm not sure why this is, but I've attached both the HTML and CSS for the relevant tags below:
<div id="parentLogin">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default" style="width: 275%;">
<div class="panel-heading">
<div class="panel-title" style="text-align: center; font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</div>
#profileAbout, #parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
.login-error {
margin-top: 10px;
margin-bottom: 10px;
color: red;
font-weight: bold;
}
Thank you in advance for the help!
The parent container .row doesn't have a specified width. This allows content inside of the container to take up space as it needs. When the login error message text is introduced, the <input> elements widen as the text from error message is filling the entire width of the parent container.
Try this. I gave .row a specific width and updated some CSS to mimic the photos you included. Now, with or without the error message text, your .row container with login content will always be 240px wide or whatever width you'd like.
#profileAbout, #parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
.row {
width: 240px;
padding: 10px;
}
.panel-body {
width: 100%;
}
input {
width: 95%;
margin: 3px;
height: 25px;
}
.panel-title {
text-align: center;
margin: 5px;
}
.suit_and_tie {
background: #FFF;
margin-top: 5px;
border-radius: 500px;
border: 1.5px solid #000;
padding: 5px 25px 5px 25px;
}
.login-error {
margin-top: 10px;
margin-bottom: 10px;
width: auto;
color: red;
font-weight: bold;
}
<div id="parentLogin">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</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 am trying to put a registration page in the center of my html page. I am using bootstrap, but a little confused how to center it after a couple of attempts.
Here is part of the html page I am working on. These html code goes to the <body>:
<div class="container registration-container">
<div class="row">
<div class="span6">
<form class="form-horizontal" id="registerHere" method='post' action=''>
<fieldset>
<legend>Registration</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" >Create My Account</button>
</div>
<div class="control-group success">
<!-- TODO -->
</div>
<div class="control-group error">
<!-- TODO -->
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
and this is the CSS I am trying to make this registration form looks good:
.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
/*margin-top: 40%;*/
margin-bottom: auto;
}
legend{
text-align: center;
}
However, this form looks really ugly: the legend is not centered and not fit in the container, and everything looks strange.... Can someone please help me figure out how I can make this form be more professional and good styled?
Try This css this will work fine DEMO HERE
.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
margin:0px auto;
}
try this with using property in css - margin: 0 auto;
.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
/*margin-top: 40%;*/
margin-bottom: auto;
margin: 0 auto;
}
.registration-container{ margin: 0 auto; }
set your container Center of the screen :)
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".