html - What you need to change so that the input fields are to the right of the picture? -


please, me, need change input fields right of picture?

https://codepen.io/anon/pen/gmgjqy

.div1{    font-size:250%;    text_align: center;  }  .pedit_labeled{    float: left;    line-height: 16px;  }  .pedit_label{    color: #656565;      width: 170px;      padding: 6px 10px 0 0;      line-height: 16px;      float: left;      text-align: right;  }  .clear_fix {      display: block;  }  .clear_fix:after {      content: '.';      display: block;      height: 0;      font-size: 0;      line-height: 0;      clear: both;      visibility: hidden;  }  .pedit_row {      padding-bottom: 15px;  }  input.dark, #profile_editor textarea, .pedit_dropdown {      width: 300px;  }  pedit_bday, .pedit_bmonth {      padding-right: 8px;  }  .fl_l {      float: left;  }  .selector_container {      background: #fff;        zoom: 1;  }
<div class="div1">contact's profile</div>  <div>      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gctvihkpz1ybw0mmpoif0jublfmguh308cddnjcnsrswwlisfx7a" class="img-circle" align: "left">      <div class="pedit_row clear_fix">          <div class="pedit_label">name:</div>          <div class="pedit_labeled">              <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />          </div>      </div>      <div class="pedit_row clear_fix">          <div class="pedit_label">sex:</div>          <div class="pedit_labeled">              <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />          </div>      </div>      <div class="pedit_row clear_fix">          <div class="pedit_label">nationality:</div>          <div class="pedit_labeled">              <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />          </div>      </div>      <div class="pedit_row clear_fix">          <div class="pedit_label">family status:</div>          <div class="pedit_labeled">              <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />          </div>      </div>      <div class="pedit_row clear_fix">          <div class="pedit_label">web site:</div>          <div class="pedit_labeled">              <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />          </div>      </div>  </div>

you can using float , set width both divs

.div1 {    font-size: 250%;    text-align: center;  }  .pedit_labeled {    float: left;    line-height: 16px;    width: 60%;    box-sizing: border-box;  }  .pedit_label {    color: #656565;    width: 35%;    padding: 6px 10px 0 0;    line-height: 16px;    float: left;    text-align: right;    box-sizing: border-box;  }  .clear_fix {    display: block;  }  .clear_fix:after {    content: '.';    display: block;    height: 0;    font-size: 0;    line-height: 0;    clear: both;    visibility: hidden;  }  .img-block {    float: left;    width: 45%;    padding-right: 5%;  }  .img-block img {    width: 100%;  }  .input-block {    float: left;    width: 50%;  }  .pedit_row {    padding-bottom: 15px;  }  input.dark, #profile_editor textarea, .pedit_dropdown {    width: 100%;  }  pedit_bday, .pedit_bmonth {    padding-right: 8px;  }  .fl_l {    float: left;  }  .selector_container {    background: #fff;    zoom: 1;  }
<div class="div1">contact's profile</div>  <div>      <div class="img-block">        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gctvihkpz1ybw0mmpoif0jublfmguh308cddnjcnsrswwlisfx7a" class="img-circle">      </div>      <div class="input-block">        <div class="pedit_row clear_fix">            <div class="pedit_label">name:</div>            <div class="pedit_labeled">                <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />            </div>        </div>        <div class="pedit_row clear_fix">            <div class="pedit_label">sex:</div>            <div class="pedit_labeled">                <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />            </div>        </div>        <div class="pedit_row clear_fix">            <div class="pedit_label">nationality:</div>            <div class="pedit_labeled">                <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />            </div>        </div>        <div class="pedit_row clear_fix">            <div class="pedit_label">family status:</div>            <div class="pedit_labeled">                <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />            </div>        </div>        <div class="pedit_row clear_fix">            <div class="pedit_label">web site:</div>            <div class="pedit_labeled">                <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" />            </div>        </div>      </div>  </div>


Comments

Popular posts from this blog

ZeroMQ on Windows, with Qt Creator -

unity3d - Unity SceneManager.LoadScene quits application -

python - Error while using APScheduler: 'NoneType' object has no attribute 'now' -