Power By 专否社区

Wrapping div to new line causing funny behavior

Go To StackoverFlow.com

1

If any of the nested div's below have a length longer then a adjacent div, the div's don't wrap to the next line "properly".

Without dividing each row in it's own div, is there a way to force div #5 (in the example below) to fall underneath div #1 even if div #1 is taller than the rest? 

<style type="text/css">
    .video-item {
        margin: 10px 29px 20px 0px; 
        width: 208px; 
        float: left;
        overflow: hidden; 
}
</style>

<div style="width: 948px;">
    <div class="video-item">1<br>This is what happens when Description is too long...         </div>
    <div class="video-item">2<br>Description</div>
    <div class="video-item">3<br>Description</div>
    <div class="video-item">4<br>Description</div>
    <div class="video-item">5<br>Description</div>
    <div class="video-item">6<br>Description</div>
    <div class="video-item">7<br>Description</div>
    <div class="video-item">8<br>Description</div>
    <div class="video-item">9<br>Description</div>
    <div class="video-item">10<br>Description</div>
</div>

Example with even Description

Example with uneven Description

2012-04-03 22:34
by bradley4
It's not a wierd behaviour, it's the way floating left div's stack. Imagine that they are tetris blocks not falling from top to bottom but from right to left. The 5 Description block can't move left any further because 1 is too tall - Benjamin Crouzier 2012-04-03 22:45
Thanks for the explanation pinoucho - bradley4 2012-04-03 22:53
Give me a little arrow up then, it means the same : - Benjamin Crouzier 2012-04-03 22:54

1

You need to set the clear CSS style on the div, to bring it back into normal flow:

<style type="text/css">
    .video-item {
        margin: 10px 29px 20px 0px; 
        width: 208px; 
        float: left;
        overflow: hidden; 
    }
    .clear {
        clear: left;
    }
</style>

<div style="width: 948px;">
    <div class="video-item">1<br>This is what happens when Description is too long...         </div>
    <div class="video-item">2<br>Description</div>
    <div class="video-item">3<br>Description</div>
    <div class="video-item">4<br>Description</div>
    <div class="video-item clear">5<br>Description</div>
    <div class="video-item">6<br>Description</div>
    <div class="video-item">7<br>Description</div>
    <div class="video-item">8<br>Description</div>
    <div class="video-item clear">9<br>Description</div>
    <div class="video-item">10<br>Description</div>
</div>

With CSS3, you could use :nth-child to achieve this more dynamically:

.video-item:nth-child(4n+1) {
    clear: left;
}
2012-04-03 22:38
by Pete
I learn something here. nth-child(4n) is quite cleve - Benjamin Crouzier 2012-04-03 22:40
Ack, it should be nth-child(4n+1) - only available in modern browsers though, so the initial solution is the one that should be used - Pete 2012-04-03 22:44

1

Another solution would be to force the height of your elements like this: (but @Pete solution is more elegant)

.video-item {
    margin: 10px 29px 20px 0px; 
    width: 208px; 
    float: left;
    overflow: hidden; 
    height: 70px;
}

jsFiddle here

2012-04-03 22:42
by Benjamin Crouzier
Ads