html - aligning elements in their containers and the containers on the line -


i've got several elements trying group , center them on page so:

                                         |                                          |               username:                  |                                ________________           |                 img 1               password:                  |                                ________________           |                 img 2                   login                  |                                          |                                          | 

i don't want username , password centered, still want @ left side of input boxes.

right looks this:

                                         |  username                              im|g 2                                            |                           _______________                 |                 img 1          _______________             pass|word:                                                           |                                    login                  |                                          |                                          | 

i've got img 1, login button , vertical line in spot form on place. i've tried playing around lot of different things rest of login form , img 2 in right spot stuck. here basic layout of html file:

<div id="center-wrapper">     <div id="img1">         <img src="img1.png" />     </div>     <br>     <div id="img2">         <img src="img2.png" />     </div>      <div id="line"></div>      <form id="form-wrapper" action="/login/" method="post" style="width:40%;">     {% csrf_token %}     {% field in form %}     <br>         {% if field.errors %}             <div class="form-group has-error">                 <label class="col-sm-2 control-label" for="id_{{ field.name }}">                 {{ field.label }}</label>                 <div class="col-sm-10">                     {{ field|attr:"class:form-control" }}                     <span class="help-block">                         {% error in  field.errors %}{{ error }}{% endfor %}                     </span>                 </div>             </div>         {% else %}             <div class="form-group">                 <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>                 <div class="col-sm-10">                     {{ field|attr:"class:form-control" }}                     {% if field.help_text %}                         <p class="help-block"><small>{{ field.help_text }}</small></p>                     {% endif %}                 </div>             </div>         {% endif %}         <br>     {% endfor %}     <div class="form-group">         <div class="col-sm-offset-2 col-sm-10">             <br>             <button type="submit" class="btn btn-primary" value="log in">{% trans "log in" %}</button><br>             <br>don't have account? <a href="/signup/">sign up</a>         </div>     </div>     </form> </div> 

my button inside form not sure why 1 being centered , rest of form not. also, <br> not putting img 2 under img 1. css this:

#center-wrapper {     text-align: center;     margin: auto;     width: 60%;     height: 100%; }  #form-wrapper {     width: 50%; }  #img1 {     height: 220px;     width: 274px;     background: none;     z-index: 30;     float: right;     position: absolute;     margin-top: 0; }  #img2 {     height: 85px;     width: 274px;     background: none;     z-index: 30;     float: right;     position: absolute;     margin-bottom: 0; }  #line {     height: 305px;     width: 2px;     background-color: #8a8a8a;     top: 200px;     left: 50%;     z-index: 30;     position: absolute; } 

i don't think question hard, have been struggling on getting format right long , want suggestions! using django forms, pretty tricky format (formatting them widget-tweaks), don't think should matter moving position around.

please avoid use of absolute positions kind of layouts break view @ point.

i suggest use of other css methods. check snippet examples if have more questions can ask:

display - table

* {    margin: 0;    padding: 0;    box-sizing: border-box  }  html,  body {    height: 100%;  }  #center-wrapper {    height: 100%;    width: 100%;    display: table;  }  #center-wrapper > div {    width: 50%;    display: table-cell;    vertical-align: middle;    text-align: center;  }  #center-wrapper > div:first-child {    border-right: 2px solid red;  }  #form-wrapper {    width: 70%;    display: inline-block;  }  label,  input {    width: 100%;    text-align: left;    display: block;  }
<div id="center-wrapper">    <div>      <form id="form-wrapper">        <label>user</label>        <input type="text">        <label>pass</label>        <input type="text">        <button type="submit" value="log in">log in</button>      </form>    </div>    <div>      <img src="http://placehold.it/200" />      <img src="http://placehold.it/200" />    </div>  </div>


inline-block

* {    margin: 0;    padding: 0;    box-sizing: border-box  }  html,  body {    height: 100%;  }  #center-wrapper {    height: 100%;    width: 100%;  }  #center-wrapper > div {    width: 48%;    display: inline-block;    vertical-align: middle;    text-align: center;  }  #center-wrapper > div.line {    width:2%;    height:100%;    background:purple;  }  #form-wrapper {    width: 70%;    display: inline-block;  }  label,  input {    width: 100%;    text-align: left;    display: block;  }
<div id="center-wrapper">    <div>      <form id="form-wrapper">        <label>user</label>        <input type="text">        <label>pass</label>        <input type="text">        <button type="submit" value="log in">log in</button>      </form>    </div>    <div class="line"></div>    <div>      <img src="http://placehold.it/200" />      <img src="http://placehold.it/200" />    </div>  </div>


note : other methods flex work also, here give idea


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -