How can I chronologically stack different height divs in two columns?

I have two columns and want to stack divs of different heights in order of appearance.

The divs are dynamically created.

I have tried to do this by floating the first story to the left and the second to the right, but their still seem to be some anomalies.

Have a look at this demo, it should explain it all.


I'm not sure if this is the desired effect you are going for, but try using

.left {
.right {

as your CSS for left and right.

Try to use "clear:left" for floated to left and "clear:right" for floated to right.

You cannot create two columns without empty space between with that HTML structure.

If you want two columns without empty space, then you need to generate different structure - place odd elements in one column and even in other.

Put them in a table with two cells. (Yes, yes, flame away!)

Added: To clarify: what I meant was this:

<div>First DIV</div>
<div>Third DIV</div>
<div>Fifth DIV</div>
<div>Second DIV</div>
<div>Fourth DIV</div>
<div>Sixth DIV</div>

Throw in some width and padding settings, and you'll have two neat little stacks.

Now, looking at your examples I think I realized something else yet. You want the <div>'s to arrange automatically in such a way that both stacks are as equally sized as possible. I don't think that's possible.

Well, you might try to render them, and then check their heights with JS, and rearrange them... but this will cause some nasty flickering in the browser.

Added 2: Check the link:

Category:css Time:2009-09-07 Views:1

Related post

  • How to stack relative positioned divs? 2011-12-07

    I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support mult

  • How do I achieve equal height divs (positioned side by side) with HTML / CSS ? 2009-06-29

    I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content. For example, the right div has a lot of content, and is double the hei

  • Equal height divs with footer always at bottom of tallest div 2009-10-29

    I was wondering if this were possible, and if it is the best way to go about this: (since I'm not allowed to post pics yet ^^) So, not only does each column have to be of equal height, but each column also has its own individual footer. I saw this SO

  • Equal height divs - complicated with multiple backgrounds 2010-02-22

    I'm trying to create a website and it's design is forcing me to use multiple backgrounds. I'm talking about a technique that looks like this <div id="left"> <div id="left_1"> <div id="left_2"> </div> </div> </div>

  • center div vertically in a % height div? 2010-07-29

    Is it possible to center a div vertically in a % height div? --------------Solutions------------- This has been asked enough times here as well as all over the Internet. A quick search will bring you tons of results. Anyhow, my preferred way of doing

  • Easy equal height DIVs without JavaScript possible? 2010-09-01

    I've worked mostly with table-based layouts up to this point, but since it's considered a no-go thing of the past now I've taken on the task of learning DIV-based layouting. One of the most annoying challenges so far for me has been figuring out a wa

  • How to create divs like Stack Overflow's divs above 2010-11-25

    I like the 'flat' clean look of Stack Overflow's divs 'Question' 'Tags' 'User' etc. How can I mimic those in my blog? Mind you, I am not too familiar with XHTML (mostly c++). Are there any tools to generate the HTML code that I can just cut/paste in

  • Div height fix for % based columns 2010-12-15

    I have a webpage i've started at following address: Basically im after a 2 column layout with 2 fluid containers that display background colour down to footer evenly. At the moment however th

  • Two vertical divs within a 100% height div 2011-03-24

    Sorry for my bad english, hope you will understand my issue. I'm turning my head around a problem that I know I've been solving once before. The issue is that I need two DIVs inside a div where one of the DIVs has a given height and the other one fil

  • HTML, CSS, jQuery - Height of divs in one column depending on the height of divs in another column 2011-11-07

    I've got the following problem. Consider this example of html code: <html> <body> <div id="leftColumn"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></

  • Vertical-align div in relation to auto height div 2012-01-27

    I am trying to make vertical-aligned div in relation to auto height div. It is a little bit hard to explain so I have screenshot that will explain everything: The orange div is the container. The blue div is 2nd container inside the main container. T

  • 100% height div inside a display:table-cell div 2012-03-31

    I'm trying to put a 100% height div inside a display:table-cell div, but it doesn't seem to work in IE. Any workaround for IE? Here's my code: <div style="display:table-row;"> <div style="display:table-cell; background-color:blue; border-lef

  • position div under min-height div 2013-08-05

    My question here is - how to position div to stick at the bottom of another div that has min-height style atribute. It looks like this |-------------------| |wrapper | |----------|--------| |min-height|min-heig| | div | div | |----------|--------| |d

  • 100% height divs 2014-05-22

    Hi! I'm trying to combine edge animate content with a very simple reflow layout of 100% width divs. The idea is to create a slideshow that will scroll each Edge Animate component fullscreen. I was wondering if there's a way to achieve a 100% height d

  • Responsive Equal height div without specifying the height 2015-01-19

    I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height. If the left side div is long then the

  • Split Div Into 2 Columns Using CSS 2009-12-26

    I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows: <div id="content"> <div id="left"> <div id="object1"></div> <div id="object2"

  • ( height 100% ) plus (2-column css) 2010-05-19

    I need a 2-column interface to stretch 100% height of the page. PS: If the columns are too long, the scroll bar should appear. After this question is solved, I'll try to add a sticky footer to the interface. PPS:please, no solutions using "fake" back

  • 2 column div layout: right column with fixed width, left fluid 2011-03-04

    My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solu

  • Determine the Width of a dynamic CSS3 Multicolumn DIV width fixed column-width 2011-12-02

    I have a DIV container filled with a dynamic text. The length of the text can be different. The DIV container has a fixed height but no width. The Text is formatted as CSS3 Multicolumn Text width a fixed columns-width. The result is n columns with th

Copyright (C), All Rights Reserved.

processed in 0.411 (s). 13 q(s)