Geek Answers Handbook

The position of a div is lower than another div, unless the height exceeds

I have an external div with a height of 400 pixels,

In this div, I have several UL with dynamic height (variable number of LI per UL).

I want divs to be vertically aligned first, and if it doesn't fit, UL should be placed next to the div (on the right).

So, let's say first the UL has a height of 100 pixels, the second UL has a height of 250 pixels, the third is 300 pixels.

The first and second should be located one above the other (100 + 250 and 400). A third should be added directly to the first.

How can I achieve this with CSS / HTML (wihout JS). I now have this:

.outer {
height: 400px;
width:100%;
float:left;
background-color: yellow;
}
.element {
background-color:red;    
float:left;
overflow:show;
}

Current fiddle: http://jsfiddle.net/L9c9a58n/

+4
source share
1

CSS3 float s,
http://jsfiddle.net/ossym8zr/2/

.outer {
    height: 400px;
    width:100%;
    background-color: yellow;

    -webkit-columns: 3;
    -moz-columns: 3;
     columns:3;
}


.element {
    margin: 0 0 20px 0;
    width: 33%;
}

, . .

,

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

http://caniuse.com/#feat=multicolumn, CSS3 ( IE < 10)

display: flex, ()
http://jsfiddle.net/wfsyqnpz/1/

.outer {
    ...
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

flexbox CSS3 columns, , . . http://css-tricks.com/snippets/css/a-guide-to-flexbox/

+1

More articles:


All Articles