Floating divs, equal height - filling a space with an additional div without overflow

Question

I have two div columns of different heights that I like the same height. I achieved this with hack markup using the following css for my div columns:

.lane1 { padding-bottom: 800px; margin-bottom: -800px; } 

In html, a flowchart is displayed. I would like to have a line from the end of each lane to the bottom of the two-lane part to have a continuous diagram.

I tried to achieve this with an extra div with class .LineFilling is a line that goes down, but I don't know how to do it. Therefore I put

 position: absolute; overflow: hidden; 

in the .lane1 class and made a .LineFilling element with a height of 600 pixels, but this does not work, because an overflow is displayed. Is there a way for a .LineFilling element to expand to the end of the strip? Or expand further, but the overflow shimmers?

Thanks for the help.

EDIT: I posted the code here online: Click here to see the code

Answer 1

Pure CSS Solution

Here is a DEMO of this solution.

In this DEMO, you see multipple Row s, each Row can have a variable number of columns, without specifying anything in the markup and not fixing any width. (the width is always evenly distributed between the columns). Each column is called ElementsHolder and can contain any number of Elements .

the entire column in the row will always have the same height, and the last arrow in the row will fill this space.

In DEMO you can see 3 Row s. The first Row has a starting point, so there is no need to stretch. The second Row has 3 ElementsHolder , without indicating anything special in the layout, 2 of them will stretch to fill the gap. The third Row has 2 ElementsHolder , behaves as expected.

note that stretching works regardless of Element height. (some of them have 2 or 3 lines of text, and it works great)

If you want to use this technique, you only need to implement other types and arrows (curve, etc.).

The solution is implemented using the new Flex flex model. the direction is set via flex-direction: row; Each row has an ElementsHolder that gets equal width.

each of these ElementsHolder also a flexible box, but this time its direction is opposite ( flex-direction: column; ).

the child of ElementsHolder is equal to Element & Arrow s, I don't want them to be of equal height, but to fix the natural height. except for the last arrow, which should cover the rest of the container.

all this is achieved using the flex property with the appropriate values.

More details on the flex model can be found HERE

Answer 2

Yes it is possible with pure css. For this, I used the display table-row and table-cell properties.

HTML:

 <div class="parent"> <div class="child"> <p>line 1</p> </div> <div class="child"> <p>line 1</p> <p>line 2</p> <p>line 3</p> <p>line 4</p> </div> </div> 

CSS

 .parent{display:table-row;} .child{display:table-cell;border:1px solid #ccc;padding:10px;} p{margin:5px 0;} 

See fiddle .

Update: Possible DEMO Solution

Answer 3

I don’t know if I really understand what you need. I tried the following

Adding a new absolute element to laneContainer with height: 100%

 #straightLine { background-color: #FFBF80; height: 100%; left: 104px; position: absolute; width: 3px; z-index: 5; } 

Plus some small modifications to some other objects, you will find them in the violin ...

http://jsfiddle.net/RRupc/9/

Something like what you want?

Answer 4

Instead of filling in another div to fill in the blank, wouldn't it be easier to add a class to the div in the left column and style to fill in any spacing / line requirements you have?

So you could:

HTML:

 <div class="twoColumn"> <div class="column"> <div class="step doubleRow"> <p>One step covering two rows here</p> </div> </div> <div class="column"> <div class="step"> <p>Single size step</p> </div> <div class="step"> <p>Single size step</p> </div> </div> </div> 

Answer 5

Have you seen these 2 plugins?

JQuery isotope
jQuery Mansonry

In the end, there is a solution for you !?
Take a look.

Answer 6

FlexBox might be worth a look too.

if you are ok with IE10 +

Auto Leveling (CSS)

 align-items: stretch 

Reads well here and here.

Greetings

Rob