Sinisterly
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>