CSS - breaking the element in place (no return to beginning of the line)

Question

I use some ready solution in e-commerce platform where the best way of changing look and feel is override/add new CSS styles. I don't want change the templates - because it means trouble in case of updates.

I wonder, if I can achieve effect of table without using standard and CSS table style (using display: table-cell make some other unexpected effect).

This efect I have now e.g (with display: inline)

|                                                             |
| [first element ][ second element ][ third element ][ fourth |
| element]                                                    |
|                                                             |

This is what i want:

|                                                               |
| [first element ][ second element ][ third element ][ fourth   |
|                                                      element] |
|                                                               |

Any ideas?

Answer 1

You could use inline-block instead, and give the fourth element a new ID which would define a specific width and height for it to stay in the line.

Answer 2

1. Without CSS, you could just add
   breaks in the actual html markup so that you get the content to stretch vertically. Thi solves the not changing the template problem.

2. Or with CSS, you could set the fourth element as display:block; and float it

3. Another option would be to wrap the first 3 elements in a div, and add some attributes to the div

You should provide a specific code example if this doesn't quite help you.

Answer 3

Without knowing your html layout, you could simply make your element behave like a table.

<div class="table-like">
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
    <div class="td-like">element1</div>
 </div>

.table-like {
    display:table;
    width:100%
}
.td-like {
    display:table-cell;
    width:25%
}

fiddled here