Consider this scenario where I have created a custom dropdown list using HTML within a generic div:
$(document).ready(function() {
$("#selectbox-body").css("width", $("#selectbox").width());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="outer-div">
<label style="float: left; width: 100px; background-color: blue">LABEL</label>
<div id="selectbox" style="background-color: pink">......</div>
<div id="selectbox-body" style="position: absolute; height: 100px; background-color: red">12312313</div>
</div>Find more information on http://jsfiddle.net/sdkpkLds/.
The issue arises when #selectbox.width is equal to the width of #outer-div, and not #outer-div minus label.width. How can we position #selectbox-body so that it does not appear under label?