How can I wrap checkbox form elements in CSS? - html

Question

I am working on some code that presents a form with a number of checkboxes. I would like to get the checkboxes to wrap to a second (and third, and fourth) line, but am having trouble doing so. At the moment, the checkboxes run straight off the page in a line without wrapping.
There are 10 (or more) checkboxes, but for the sake of brevity I've listed only a few of them since listing all of them wouldn't really add to the conversation:
My CSS:
.add-to-cart .attribute label {
display: inline;
padding-right: 35px;
}
.add-to-cart .form-checkboxes{
max-width: 600px;
height: 300px;
display: inline-flex;
}
.add-to-cart .attribute .form-item .form-type-checkbox {
position: absolute;
display: inline-block;
width: 100%;
height: 90px;
background-color: #ddd;
padding: 20px;
margin: 10px;
white-space: nowrap;
text-align: center;
vertical-align: middle;
font: bold 10px verdana, arial, 'Raleway', sans-serif;
font-style: italic;
}
My HTML/Code:
<div class="content">
<div class="add-to-cart">
<form class="ajax-cart-submit-form" action="/this-product" method="post" id="uc-product-add-to-cart-form-7" accept-charset="UTF-8">
<div class="attribute attribute-7 even">
<div class="form-item form-type-checkboxes form-item-attributes-7">
<label for="edit-attributes-7">Extras </label>
<div id="edit-attributes-7" class="form-checkboxes">
<div class="form-item form-type-checkbox form-item-attributes-7-49">
<input type="checkbox" id="edit-attributes-7-49" name="attributes[7][49]" value="49" class="form-checkbox" />
<label class="option" for="edit-attributes-7-49"> Blue </label>
</div>
<div class="form-item form-type-checkbox form-item-attributes-7-43">
<input type="checkbox" id="edit-attributes-7-43" name="attributes[7][43]" value="43" class="form-checkbox" />
<label class="option" for="edit-attributes-7-43"> Red </label>
</div>
<div class="form-item form-type-checkbox form-item-attributes-7-50">
<input type="checkbox" id="edit-attributes-7-50" name="attributes[7][50]" value="50" class="form-checkbox" />
<label class="option" for="edit-attributes-7-50"> Green </label>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Try this
.add-to-cart .attribute label {
display: inline;
padding-right: 35px;
}
.add-to-cart .form-checkboxes{
max-width: 600px;
height: 300px;
display: inline-flex;
}
.add-to-cart .attribute .form-checkboxes:not(.form-item) {
position: absolute;
display: inline-flex;
width: 100%;
height: 90px;
background-color: #ddd;
padding: 20px;
margin: 10px;
white-space: nowrap;
text-align: center;
vertical-align: middle;
font: bold 10px verdana, arial, 'Raleway', sans-serif;
font-style: italic;
}
live demo - https://jsfiddle.net/91r7v20q/

Answer 2

Well, I figured it out. I changed this CSS code:
.add-to-cart .form-checkboxes{
max-width: 600px;
height: 300px;
display: inline-flex;
}
To this:
.add-to-cart .form-checkboxes{
max-width: 600px;
display: inline-block;
}
I removed the fixed height to allow the block to be flexible in allowing the elements to be completely displayed before the last row (with the submit button, see comments on this questions). Whew!