Css Floating Divs At Variable Heights

CSS Floating Divs At Variable Heights

To my knowledge, there's no way to fix this problem with pure CSS (that works in all common browsers):

• Floats don't work.
• display: inline-block doesn't work.
• position: relative with position: absolute requires manual pixel tuning. If you're using a server-side language, and you're working with images (or something with predictable height), you can handle the pixel tuning "automatically" with server-side code.

Instead, use jQuery Masonry.

How to float elements with different heights?

you could just apply a clear to every fifth element to force it to start all the way at the left. I think it would look something like this in css3:

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddle demo

Float divs with variable heights (arrange)

I don't think that this is doable a 100% with "just" css, but jquery-masonry should do the trick [ http://desandro.com/resources/jquery-masonry/ ]. Well, but i hope somebody proofs me wrong :)

Floating divs - variable height and variable columns - with no gaps

Like I said in a comment, you need to calculate this in javascript and use absolute positioning. Here is an example:

http://jsfiddle.net/rJxtm/4/

//Generate random height for each module, normally this doesn't need to be done because
//they have various amounts of contents in a real app.
$(".module").each(function(i) {
    var height = (150 + (Math.random() * 100 | 0));
    this.style.height = height + "px";
});


$(window).bind("orientationchange resize", function(e) {
    var modules = $(".module"),
        columnWidth = modules[0].offsetWidth,
        margin = 10,
        parentWidth = $(".modules").width(),
        fits = Math.floor(parentWidth / (columnWidth + margin * 2)),
        columnHeights = {},
        i;

    for (i = 0; i < fits; ++i) {
        columnHeights[i] = 0;
    }

    function getTop(i) {
        var nColumn = i % fits;
        return columnHeights[nColumn];
    }

    modules.each(function(i) {
        var height = this.offsetHeight, //Now I am just retrieving the height
            nColumn = i % fits;

        this.style.left = ((columnWidth + margin) * nColumn) + "px";
        this.style.top = getTop(i) + "px";
        columnHeights[nColumn] += (height + margin);
    });

}).trigger("resize");

Make all floating DIVS same height

Set the wrapper to display: table and set the columns to display: table-cell (and remove the float)

So it will look like this:

.wrapper {
    display: table;
    ...
}
.wrapper .column {
    display: table-cell;
    ...
}

Stacking divs with variable height in 2 columns like Facebook Timeline

I worked on this last night and found a rather simple way to do.

Compare the bottom position of the left column and the right column, append the new li element to the side with smaller value, which can be done by th e following way:

var last_left_post = $('.left:last');
var last_right_post = $('.right:last');
var left_position = 0;
var right_position = 0;

left_position = last_left_post.height() + last_left_post.offset().top;
right_position = last_right_post.height() + last_right_post.offset().top;

if(left_position<=right_position){
    $('#timeline').append('<li class="left"></li>');
}else{
    $('#timeline').append('<li class="right"></li>');
}

.left and .right using the same css as you do.

Shrinkwrapping floating divs of variable number, width, and height inside another div

Not sure what exactly do you want, but I think, that you need inline-blocks here, like this: http://jsfiddle.net/TSpXZ/

To make them work in IE, add the following in the Conditional Comments:

div.cardtable {
    display:inline;
    zoom:1;
}

And try to experiment more with inline-blocks — they are awesome!

HTML/CSS: Making two floating divs the same height

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {  overflow: hidden;      width: 100%;}#left-col {  float: left;  width: 50%;  background-color: orange;  padding-bottom: 500em;  margin-bottom: -500em;}#right-col {  float: left;  width: 50%;  margin-right: -1px; /* Thank you IE */  border-left: 1px solid black;  background-color: red;  padding-bottom: 500em;  margin-bottom: -500em;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>  <div id="container">    <div id="left-col">      <p>Test content</p>      <p>longer</p>    </div>    <div id="right-col">      <p>Test content</p>    </div>  </div></body>