Question

I was wondering if you can apply a clearing style effect to a bunch of inline elements?

My problem is I am working with a set of sibling div elements so I cannot apply any kind of block display to a container or parent element.

Here is the code in question (the HTML cannot change unfortunately, only the CSS):

<div class="form-item form-type-checkbox form-item-alert-option-1">...</div>
Send alert
<div class="form-item form-type-select form-item-alert-time-period-1">...</div>
day(s) from completion date
<div class="form-item form-type-checkbox form-item-alert-option-2">...</div>
Send alert
<div class="form-item form-type-select form-item-alert-time-period-2">...</div>
day(s) from completion date

Note there is further input and label content where the ‘…’ marks are but it is too large and irrelevant for the question.

The CSS I am applying is:

.form-item {
    display: inline;
}

In the above sample I would like a new line represented by each class number, ‘1, 2 etc’.

Is this possible without altering the HTML?

Any input is much appreciated,

Rick

Answer 1

I’m not sure I’ve got exactly what you want to achieve, and why you have to display your divs as inline elements, but you could try with inline-block:

.form-item {
    display: inline-block;
    clear: both;
}

otherwise why don’t you just float:left them and clear them?

.form-item {
    float: left;
    clear: both;
}

haven’t tested it so it might not work. if you could elaborate more about why you are displaying your divs as inline elements, that would help! thanks