Question

Let me explain, I’ve got several floats in a parent div, it may be possible that some go to new line due to parent width restriction, is it possible to do it in CSS ?

For example : style all the div like div3 and div5 and all the next div which may be break ?
(please notice width and height are not fixed in real just in my example)

http://jsfiddle.net/frntz/aMzF7/1/

Thank you.

Answer 1

You can’t do it with just CSS. You’ll need to use some JavaScript to calculate the width of the container against the widths of your divs. The divs which would be wrapped to the next line could be determined by the accumulated div width exceeding the wrapper width, etc. JavaScript could then easily reset the width accumulation and apply the class and continue with the iteration of the child nodes until all ‘wrapped’ divs are found and styled.

Here’s an example with jQuery:

var maxWidth = $('#parent').width(),
    accWidth = 0;

$('#parent').children().each(function(){
    accWidth += $(this).width();
    if (accWidth > maxWidth) {
        $(this).addClass('newline');
        accWidth = $(this).width();
    }
});​

Demo 1: http://jsfiddle.net/AlienWebguy/77NTw/

Demo 2: http://jsfiddle.net/AlienWebguy/77NTw/1/

And here’s an example with vanilla JS:

var maxWidth = document.getElementById('parent').offsetWidth,
    accWidth = 0,
    nodes    = document.getElementById('parent').childNodes,
    i;

for (i in nodes) {
    if (nodes[i].hasOwnProperty('offsetWidth')) {
        accWidth += nodes[i].offsetWidth;
        if (accWidth > maxWidth) {
            nodes[i].className += ' newline';
            accWidth = nodes[i].offsetWidth;
        }   
    }
}

Demo 3: http://jsfiddle.net/AlienWebguy/77NTw/2/