<h1>Version 3 - works!</h1> <div class="container"> <p> Elements below must have same width, but some pixels are added to the input. </p> <p> Setting the border explicitly will make it a little more narrow, but not enough. Two pixels are still added. </p> <p> So we need to subtract 2px from our CSS width (i.e. make it 238px wide). </p> <input class="input-width input" /> <div class="div-width marker">This div is (at least in my browser) exactly 240 pixels wide.</div> </div>
* { margin: 0; padding: 0; } .container { padding: 10px; } p { margin-bottom: 10px; } .div-width { width: 240px; } .input-width { width: 238px; } /*.input-width { width: 240px; }*/ .marker { background-color: red; } .input { border: 1px solid; border-top-color: #ABADB3; border-left-color: #E2E3EA; border-right-color: #DBDFE6; border-bottom-color: #E3E9EF; }