Power By 专否社区

CSS Float filling gaps between divs

Go To StackoverFlow.com

1

I have some elements I want to display. But sadly it does not work the way I want it.

Here is how it works: http://jsfiddle.net/lukasoppermann/H3Nmg/7/

I want it so that the red boxes fill the space between the green box and the left side. It needs to be dynamic though. The width of the container might change and the order of the elements can be different.

I would of course prefer a css-only way, but js is fine too. Does anyone have any tips?

// EDIT To clarify, the elements cannot be hard-coded or floated to the right, because the number of elements, the width of the wrapper and also the number of green elements can vary. The order of the elements can vary too. I basically need the elements to arrange themselves without any wholes automatically.

Thats what I want.

http://img526.imageshack.us/img526/613/boxsorting.jpg

2012-04-04 02:00
by Lukas Oppermann
Check out http://masonry.desandro.com - j08691 2012-04-04 02:20
I will check it out and get back, looks promising - Lukas Oppermann 2012-04-04 02:32
You might be able to use column-count. It only works in real browsers though (no IE) and you'd need to use media queries to lessen the columns in smaller resolutions. You can see it in action here: http://www.towejewels.com/jewels - powerbuoy 2012-04-04 02:50
Masonry solved the Problem, thanks. Could you post it as an answer so I can accept and close it - Lukas Oppermann 2012-04-04 04:03

0

Hi you can define three div as like this

css

.container{
    float:left;
    margin-left:10px;
}
.top{
    width:100px;
    height:100px;
    background:red;
}


.middle{
    width:100px;
    height:100px;
    background:darkred;
    margin-top:5px;
}
.right{
    width:100px;
    height:200px;
    background:lightgreen;
    float:left;
    margin-left:10px;
}

.bottom{
    float:left;
    width:100px;
    height:100px;
    background:green;
    margin-left:10px;
}

HTML

<div class="container">
    <div class="top"></div>
    <div class="middle"></div>
</div>

<div class="right"></div>

<div class="bottom"></div>
​

Live demo here http://jsfiddle.net/rohitazad/wyvrt/1/ ​

2012-04-04 04:30
by Rohit Azad

0

What about using float:right to row-two div. You might have to fix the padding to make the green closer to red if you want. demo here http://jsfiddle.net/H3Nmg/9/

2012-04-04 02:04
by Dips
Sorry, that does not work, because elements can be in different order, a different number of elements, and the wrapper can be differently sized. For e.g. if the wrapper is bigger the second red element should be to the right of the green one, while the third red element should be to the left - Lukas Oppermann 2012-04-04 02:13
@LukasOppermann Maybe you provide some screen shots of the expected outpu - Daveo 2012-04-04 02:22

0

Should it look like this http://jsfiddle.net/H3Nmg/14/

Minus the hard coded width.

2012-04-04 02:12
by Daveo

0

see the fiddle for code and demo

fiddle: http://jsfiddle.net/H3Nmg/20/

demo: http://jsfiddle.net/H3Nmg/20/embedded/result/

Note: try to reduce the window size or width of the container div you will see the case and case output will come.

2012-04-04 03:44
by w3uiguru
Ads