Question

I’ve got a set of checkboxes I would like to position using CSS. This is how they are rendered:

<div id="edit-event-type" class="form-checkboxes">
  <div class="form-item form-type-checkbox form-item-event-type-pubQuiz">
    <input type="checkbox" id="edit-event-type-pubquiz" name="event_type[pubQuiz]" value="pubQuiz" class="form-checkbox">  
    <label class="option" for="edit-event-type-pubquiz">Pub Quiz </label>
</div>

<div class="form-item form-type-checkbox form-item-event-type-dancing">
  <input type="checkbox" id="edit-event-type-dancing" name="event_type[dancing]" value="dancing" class="form-checkbox">      
  <label class="option" for="edit-event-type-dancing">Dancing </label>
</div>

<div class="form-item form-type-checkbox form-item-event-type-foodDeals">
  <input type="checkbox" id="edit-event-type-fooddeals" name="event_type[foodDeals]" value="foodDeals" class="form-checkbox">
  <label class="option" for="edit-event-type-fooddeals">Food Deals </label>
</div>

 <div class="form-item form-type-checkbox form-item-event-type-liveMusic">
   <input type="checkbox" id="edit-event-type-livemusic" name="event_type[liveMusic]" value="liveMusic" class="form-checkbox">  
   <label class="option" for="edit-event-type-livemusic">Live Music </label>
 </div>
</div>

//Other form elements come after.

At the moment, they are getting displayed stacked one on top of another and I would like them to be displayed in stackes of, say 4. So I would like them to be displayed like this:

https://i.stack.imgur.com/eQ9o9.png

However, I have limited control over the markup so ideally I would like it all to be done in CSS. I have tried float:left and assigning them a right margin, but when I do that, although they are in stacks of 4, there is an issue where they are not aligned properly. Has anyone had an issue like this before?

Thanks,

Answer 1

give all container divs this class “form-type-checkbox” (also the first – its missing it). also add a container to all this.

css:

.container-of-all {
  overflow: auto;
  background: #000000;
}

.form-type-checkbox {
  float: left;
  width: 100px;
  margin: 5px 10px 5px 10px;
}

maybe you need to reposition the labels or checkboxes itself a bit to get them on a pretty baseline.