help with div position - Printable Version

help with div position - Printable Version

+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/Forum-Web-Design)
+--- Thread: help with div position (/Thread-help-with-div-position)

help with div position - prudruhuph - 04-18-2017

i want to create a webpage with register form & login form are in parallel, by using float property i achieved that... but the problem is distance between forms..

currently it look like this
https://www.anonfiles.cc/uploads/fe112dce2b4aa65929445dbe85bf3bd7.png

i want to make it look like this
https://www.anonfiles.cc/uploads/0f4328b538e947462602b7f3a8fcf6ec.png

CSS

Code:
#leftContainer {
   float:left;
}

#rightContainer {
float:right;
}

.form input{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 3%;
    color: #000;
    font: 95% Arial, Helvetica, sans-serif;
}
.form input:focus{
    box-shadow: 0 0 5px #43D1AF;
    padding: 3%;
    border: 1px solid #43D1AF;
}

.form input[type="submit"],.form input[type="button"]{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 3%;
    background: #43D1AF;
    border-bottom: 2px solid #30C29E;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;    
    color: #fff;
}
.form input[type="submit"]:hover,.form input[type="button"]:hover{
    background: #2EBC99;
}

HTML

Code:
<div class='form'>

<div id="leftContainer">
<h1>Register</h1>
<form action="/register.php" method="POST">
<input name="fname" type="text" placeholder="First Name"><input name="lname" type="text"placeholder="Last Name">
<br><input name="email" type="text" placeholder="Email"><br>
<input name="rollno" type="text" value="0818" placeholder="Enrollment Number"><br>
<input name="pass" type="pass" placeholder="Password"><br><br>
<input type="button" value="SUBMIT" name="register">

</form>
</div>





<div id="rightContainer">
<h1>Login</h1>
<form action="/check.php" method="POST">
<input name="rollno" type="text" value="0818"><br>
<input type="pass" name="pass"><br><br>
<input type="button" name="login" value="SUBMIT">
</form>
</div>

RE: help with div position - m0dem - 04-18-2017

If I'm understanding correctly...
https://www.w3schools.com/css/css_margin.asp

Spoiler:https://www.w3schools.com/css/css_boxmodel.asp

Code:
#rightContainer {
    margin-left: 150px;
    ...
}

RE: help with div position - Hoss - 04-20-2017

You should use Flexbox. You'll have to clean the code up yourself, but this achieves what you want.

Code:
.form {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 50em;
  margin: auto;
}

.vhr {
  width: .2em;
  background-color: #5d5d5d;
}

.form input{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 3%;
    color: #000;
    font: 95% Arial, Helvetica, sans-serif;
}
.form input:focus{
    box-shadow: 0 0 5px #43D1AF;
    padding: 3%;
    border: 1px solid #43D1AF;
}

.form input[type="submit"],.form input[type="button"]{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 3%;
    background: #43D1AF;
    border-bottom: 2px solid #30C29E;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;    
    color: #fff;
}
.form input[type="submit"]:hover,.form input[type="button"]:hover{
    background: #2EBC99;
}

Code:
<link rel="stylesheet" href="index.css">

<div class="form">

	<div>
		<h1>Register</h1>
		<form action="/register.php" method="POST">
			<input name="fname" type="text" placeholder="First Name"><input name="lname" type="text"placeholder="Last Name">
			<br>
			<input name="email" type="text" placeholder="Email">
			<br>
			<input name="rollno" type="text" value="0818" placeholder="Enrollment Number">
			<br>
			<input name="pass" type="pass" placeholder="Password">
			<br>
			<br>
			<input type="button" value="SUBMIT" name="register">
		</form>
	</div>
	<div class="vhr">
	</div>
	<div>
		<h1>Login</h1>
		<form action="/check.php" method="POST">
			<input name="rollno" type="text" value="0818"><br>
			<input type="pass" name="pass"><br><br>
			<input type="button" name="login" value="SUBMIT">
		</form>
	</div>
</div>

RE: help with div position - Inori - 04-20-2017

(04-20-2017, 03:24 AM)Hoss Wrote: You should use Flexbox. You'll have to clean the code up yourself, but this achieves what you want.

Code:
.form { display: flex; flex-flow: row wrap; justify-content: space-around; width: 50em; margin: auto; } .vhr { width: .2em; background-color: #5d5d5d; } .form input{ -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; background: #fff; margin-bottom: 4%; border: 1px solid #ccc; padding: 3%; color: #000; font: 95% Arial, Helvetica, sans-serif; } .form input:focus{ box-shadow: 0 0 5px #43D1AF; padding: 3%; border: 1px solid #43D1AF; } .form input[type="submit"],.form input[type="button"]{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 3%; background: #43D1AF; border-bottom: 2px solid #30C29E; border-top-style: none; border-right-style: none; border-left-style: none; color: #fff; } .form input[type="submit"]:hover,.form input[type="button"]:hover{ background: #2EBC99; }

Code:
<link rel="stylesheet" href="index.css"> <div class="form"> <div> <h1>Register</h1> <form action="/register.php" method="POST"> <input name="fname" type="text" placeholder="First Name"><input name="lname" type="text"placeholder="Last Name"> <br> <input name="email" type="text" placeholder="Email"> <br> <input name="rollno" type="text" value="0818" placeholder="Enrollment Number"> <br> <input name="pass" type="pass" placeholder="Password"> <br> <br> <input type="button" value="SUBMIT" name="register"> </form> </div> <div class="vhr"> </div> <div> <h1>Login</h1> <form action="/check.php" method="POST"> <input name="rollno" type="text" value="0818"><br> <input type="pass" name="pass"><br><br> <input type="button" name="login" value="SUBMIT"> </form> </div> </div>

Careful with flexbox. It's technically stable, but very far from cross-compatible. Your best (ie9-compatible) bet would be to use a wrapper div that fills its parent, then center the form inside it with margins.

RE: help with div position - Hoss - 04-20-2017

(04-20-2017, 04:02 AM)Inori Wrote: Careful with flexbox. It's technically stable, but very far from cross-compatible. Your best (ie9-compatible) bet would be to use a wrapper div that fills its parent, then center the form inside it with margins.

I bring with me, a solution for this aswell.

Code:
<script>
document.addEventListener('DOMContentLoaded', function() {
    if ((navigator.userAgent.indexOf('MSIE') + navigator.userAgent.indexOf('Trident')) != -2) {
        document.write('FUCK OFF');
    }
});
</script>