Take the 2-minute tour ×

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)


Thank you.

share|improve this question
Are you asking if you can apply specific styling to the divs that wrap to the next line? –  James Johnson Apr 30 '12 at 14:24
Your question is unclear. Is this what you're trying to do? jsfiddle.net/thirtydot/aMzF7/4 –  thirtydot Apr 30 '12 at 14:30
add comment

2 Answers

up vote 1 down vote accepted

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;

    accWidth += $(this).width();
    if (accWidth > maxWidth) {
        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,

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/

share|improve this answer
Thank you for your answer :) –  Patrick Ehlinger Apr 30 '12 at 15:39
add comment


Floats will always go on to the next line if there is no room in the parent container.

share|improve this answer
add comment

Your Answer


