div高度自动增加

Question

I've created a div. that contains another three div.

HTML:

<div id="a">
    <div id="a1">
        <img src="p.png" alt="an image" height="50" width="200">
    </div>
    <div id="a2">
        <form method="post">
            <input type="text" class="textbox"/>
        </form>
    </div>
    <div id="a3"></div>
</div>

CSS:

#a
{
height:50px;
width:100%;
display: table;
position: fixed;
}

#a1
{    
width: 200px;
height: 100%;
display: table-cell;
}
#a2
{
height: 100%;    
background-color: #664499;
display: table-cell;
}
.textbox
{
height: 50px;
float: left;
margin: 0px;
border: 0px none;
}
#a3
{
width: 200px;
height: 100%;
background-color: #669999;
display: table-cell;
}

my question is when i put any tag into that like img or input the parent div 'a' increases its height by 3 automatically.

and if i remove that tags it behaves normal. tried min-height option but didn't worked for me.

What should i do in order that wrapper div 'a' doesn't change its height?

Answer 1

try removing height: 50px; from .textbox class may fix your problem.

Answer 2

Try this

<div id="Inner_Right_Layout">
<table>
    <tr>
        <td><div class="usr_img_div">
                    <img src="~/Images/username.png"  />
                </div></td>
        <td><div class="usrnm_txtbx_div">
                    <input type="text" id="txtUserName" class="textprop"  /></td>
    </tr>
    <tr>
        <td><div class="usr_img_div">
                    <img src="~/Images/password.png"  />
                </div></td>
        <td><div class="usrnm_txtbx_div">
                    <input type="password" id="txtPassword" class="textprop" /></td>
    </tr>

         <tr>
        <td><div class="usr_img_div">
                    <img src="~/Images/password.png"  />
                </div></td>
        <td><div class="usrnm_txtbx_div">
                    <input type="password" id="txtPassword" class="textprop" /></td>
    </tr>
</table>

and css for this is

#Inner_Right_Layout {
background-color: #43BDA4;
height: 100%;
width: 100%;    
border: 0;
padding: 0;
margin: 0; 
}


#control_main_div {
height: 50%;
width: 70%;
margin-left: 0%;
margin-top: 0%;
border:1px solid black;
}

.username_div {
height: 15%;
width: 100%;
margin: 0px;
border:;1px solid blue; 
padding-bottom:5px;
}

.usr_img_div {
height: 10%;
width: 15%;
float: left;
border:;1px solid red;
}

.usrnm_txtbx_div {

width: 80%;
margin-left: 0%;
font-family: Ubuntu;
border:1px solid yellow;
margin-top:0%;

}
.textprop {
height: 80%;
width: 90%;
margin: 0;
padding: 0;
border: 0;
margin-left: 1px;
font-family: 'Ubuntu';
font-size: 16px;
font-weight: 100;
}

let me know ,if any changes needed