html - Sometimes DIVs are making like a ladder -


i developing chrome extension.

sometimes when i'm clicking on extension icon, divs making "ladder":

enter image description here

i want this:

enter image description here

how can ensure currency fields aligned properly?

here markup:

<div class="calc">     <div class="in">         <img id="cur-img-in" src="img/amd.gif"/>         <select name="currency-calc-cur" id="in-select">             <option selected="selected" value="amd">amd</option>             <option value="eur">eur</option>             <option value="rur">rur</option>             <option value="usd">usd</option>         </select>         <input type="text" id="in"/>     </div>     <img id='swap-cur' src="img/swap.png" alt="swap"/>     <div class="out">         <img id="cur-img-out" src="img/usd.gif"/>         <select name="currency-calc-cur" id="out-select">             <option value="amd">amd</option>             <option value="eur">eur</option>             <option value="rur">rur</option>             <option selected="selected" value="usd">usd</option>         </select>         <input type="text" id="out"/>     </div> </div> 

and style:

.calc {    margin-top: 10px;    margin-left: 20%;    width: 60%; }  .calc input[type="text"] {    width: 100%; }  .calc #bank-list {     width: 100%; }  .calc [name="currency-calc-cur"] {     width: 78%; } .calc .in {     width: 40%;     position: relative;     float: left; }  .calc .out {     width: 40%;     position: relative;     float: right; }  .calc #swap-cur {     margin: 17px 0 0 16px; } 

and my sources github if missing.

your image needs floated well.

.calc #swap-cur {     float: left;     margin: 17px 0 0 16px; } 

Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -