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
withposition: 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>
Related Topics
How to Set the Height of Vuetify Card
How to Make a Child Div'S Width Wider Than the Parent Div Using Css
How Does Flex-Wrap Work With Align-Self, Align-Items and Align-Content
Using CSS For a Fade-In Effect on Page Load
Css Selector For "Foo That Contains Bar"
How to Remove Firefox'S Dotted Outline on Buttons as Well as Links
How to Use /Deep/ or ≫≫≫ or ::V-Deep in Vue.Js
Remove Header and Footer from Window.Print()
How to Align One Item Right With Flexbox
How to Override Vuetify Styles
Advantages of Using Display:Inline-Block VS Float:Left in Css
Bootstrap Center Vertical and Horizontal Alignment
Change Navbar Color in Twitter Bootstrap
Is There a CSS Selector by Class Prefix
Center Content in Responsive Bootstrap Navbar
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters