If you're looking to create a sleek foundation for a 200px wide, 30px high editable combobox that can be easily used with angular binding or other JavaScript data-binding solutions, consider the following HTML code. However, there's a desire to make the outermost div 100% wide and have the 180px wide div use padding instead of an explicit size. Unfortunately, it seems like padding is being ignored in this case. Are there any insights into why this might be happening, and are there effective workarounds available? (preferably using CSS/HTML)
<style>
.comboboxOuterDiv {
padding:0px;
margin:0px;
border:0px;
height:30px;
width:200px;
position:relative;
}
.comboboxSelectDiv {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
z-index:0;
}
.comboboxSelect {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
}
.comboboxTextDiv {
height:100%;
width:180px;
position:absolute;
top:0px;
left:0px;
z-index:1;
}
.comboboxText {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
}
</style>
<div class="comboboxOuterDiv">
<div class="comboboxSelectDiv">
<select class="comboboxSelect">
<option value="a_value">A Value</option>
</select>
</div>
<div class="comboboxTextDiv">
<input class="comboboxText" type="text"/>
</div>
</div>