I have a container that is a certain width.
I have two select elements rendering on the same line in this
main div container. The first one is absolute positioned 40px left from the
main div container and the right one is absolute positioned 40px right from the
main div container. Thus, resulting in a centered container within the
main div container.
My goal is to push two select elements into the resulting container that sit on either side of either, having the same width, and having a space equidistant in the middle.
Here is my current HTML:
<div id="container"> <select class="edit" style="left: 40px; top: 290px; width: 136px;"></select> <select class="edit" style="left: 190px; right:40px; top: 290px; width: 136px"></select> </div>
So in this one we are assuming that the left has a combined pixel count of
40+136=176px, width plus left positioning and the right having a pixel count of
190+136+40=366, left positioning plus width plus right;
the result would be a container having two equidistant select boxes within the constraints of 40px each way.
I'm not sure if my math is correct but any assistance with this would be greatly appreciated.
Try removing the
left:190px from the right hand element. The
right:40px is enough to position the element to the right.