ShellRox ShellRox - 15 days ago 5
CSS Question

Arranging absolute positioned elements symmetrically

I have been making a selection menu for my users under the search, For every one of selection button i have div:

<div class="statbox">
<select class="selectbox" id="stattrak">
<option value="any"></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">&#9654;</b></label>


and its style:

.statbox {
position: absolute;
margin-left: 4.5%;
top: 75px;
}
#stattrak {
height: 25px;
width: 120px;
font-size: 12px;
background-color: white;
}
.stattext {
float: left;
margin-right: 10px;
margin-top: 2px;
color: white;
font-family: 'Lato';
font-size: 15px;
}


So as you see the div itself has absolute position, then there is text label
float:left
is used so it can be on the left side of box, and
#stattrak
itself which is
<select>
element is following it's parent element's positions.

But i have multiple selection options, and i want them to be aligned properly in every y and x dimension. Please see the code result.

If you look at code from 1280x800 resolution, it should look very fine, but when you scale it down selection boxes overlap each other, and it looks asymmetrical when it's in higher dimension:

Higher resolution:

enter image description here

The parent of these element is
mover
div container, with the style:

.mover {
margin: 0 auto;
max-width: 61%;
}


It centers itself automatically.

I have also tried using
display: inline-block;
method, i tried it on two elements, one of them should have been left and second center, the style rule was: '.statbox { display: inline-block; margin-right: 60%; margin-top: 15px; }` and on second container that should be centered: .conbox { display: inline-block; margin-right: 60%; margin-top: 15px; }. And as you see conbox messed up.

The design:



There are 3
<select>
elements in first row, one should be left, second center and third right.

in second row, there are 2 elements, one should be left second right.

and while this is happening what i tried was that these elements would be aligned exactly and symmetrically on left, center and right.




I have tried
float: ;
option but couldn't work as i needed it, what may the problem be? does float option work? if not then what's the best way to keep the items aligned with symmetrical differences? I don't need them to be absolute positioned if there's any better way, Thanks! ( JFiddle )

I will be very thankful if you give final conclusion in jsfiddle.

Answer

absolute positioned elements are removed from the document flow, this means they cannot be positioned symetrically using rules like float, you could position a parent div absolute and have the elements within positioned relative instead:

<div class="parent">
     <div class="statbox">
        <select class="selectbox" id="stattrak">
            <option value="any"></option>
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
        <label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">&#9654;</b></label>
     </div>
     <div class="statbox">
        <select class="selectbox" id="stattrak">
            <option value="any"></option>
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>
        <label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">&#9654;</b></label>
     </div>
</div>

CSS:

.parent{
  position: absolute;
  margin-left: 4.5%;
  top: 75px;
}

.statbox {
  position: relative;
  float: left;
}
#stattrak {
  height: 25px;
  width: 120px;
  font-size: 12px;
  background-color: white;
}
.stattext {
  margin-right: 10px;
  margin-top: 2px;
  color: white;
  font-family: 'Lato';
  font-size: 15px;
}