Why aren't all 100% of the DIV is used? - html

Question

I have the following HTML code:
<div class="dispLoginSearch"> <!-- LOGIN AND SEARCH -->
<div class="loginBox">
<p>Log in to <span>My</span> <span>M</span> | Sign Up</p>
<div style="width: 100%; padding: 0; margin: 0; overflow: hidden; height: 38px;" class="brClear">
<input type="text" placeholder="Username" id="txtUsername" class="txtUsername styledTB floatLeft" />
<input type="password" placeholder="Password" id="pwPassword" class="txtPassword styledTB floatLeft" />
Login
</div>
Forgot login/password
</div>
</div>
CSS:
.dispLoginSearch
{
width: 40%;
height: 180px;
vertical-align: middle;
float: right;
padding-right: 3%;
background: #FFFFFF;
overflow: hidden;
text-align: center;
margin: 0 auto;
}
.loginBox {
margin-top: 3%;
border: 1px solid #d4d4d4;
display: block;
width: 100%;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
text-align: left;
overflow: auto;
}
.loginBox p {
margin: 5px 0 0;
font-size: 20px;
line-height: 35px;
}
.txtUsername{
width: 38%;
margin-right: 2%;
height: 30px;
}
.txtPassword {
width: 38%;
margin-right: 2%;
height: 30px;
}
.floatLeft
{
float: left;
}
.logBtn
{
width: 10%;
height: 30px;
line-height: 30px;
}
.styledBtn
{
background: #d75813;
display: block;
box-shadow:
0px 5px #BC490A,
0px 8px 10px rgba(148, 148, 148, 0.5);
text-align: center;
vertical-align: middle;
}
.styledTB {
padding-left: 5px;
background: #E8E8E8;
opacity: 1;
border: none;
outline: none;
right: 35px;
box-shadow:
0px 5px #BBB,
0px 8px 10px rgba(148, 148, 148, 0.5);
}
If I keep the logBtn at 10% it stays in the same line but the letter gets cut off almost:
If I increase the percentage to 12%, instead of expanding on the same line to fill up the DIV, it goes to the next line:
For some reason I am not able to use the 100% of the width from the parent DIV. I used float: right on the forgot login/password link and that's how far it goes. For some reason the right side of the DIV is completely not accessible.
How do I resolve the issue?
The inline style will be removed when I have resolved the issue.

Answer 1

Your problem comes from the horizontal paddings you are adding onto the inputs. Those are added to the percentage width and percentage margin you have put on the inputs.
try using the box-sizing: border-box; property on the inputs so the paddings won't get added to the specified width and margins
Some explaination about box-sizing can be found here