I have been looking for a solution for this problem but I couldn't find any in particular satisfying my request so it would be really cool if any of you can help!
The problem is that I have for example 7 radio buttons aligned vertically inside a DIV tag but I want to find a way (a JavaScript function for example) to divide them in two groups dynamically for example 4 buttons on the left side and the 3 left on the right.
For now, I just hard coded it by adding two other div child-tag inside the parent one and putted them beside each others, but this won't solve my problem!
For example, I have this code right now:
.radioButtonList{
width: 300px;
margin-left: 1px;
margin-top: 15px;
}
.radioButtonListDevidedFirst{
width: 100px;
float: left;
height: 300px;
}
.radioButtonListDevidedSecond{
width: 200px;
float: left;
height: 300px;
}
<div class="radioButtonList">
<div class="radioButtonListDevidedFirst">
<div class="radioItem">
<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
</div>
<div class="radioItem">
<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
</div>
<div class="radioItem">
<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
</div>
<div class="radioItem">
<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
</div>
</div>
<div class="radioButtonListDevidedSecond">
<div class="radioItem">
<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
</div>
<div class="radioItem">
<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
</div>
<div class="radioItem">
<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
</div>
</div>
</div>