html - Sometimes DIVs are making like a ladder -
i developing chrome extension.
sometimes when i'm clicking on extension icon, div
s making "ladder":
i want this:
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
Post a Comment