CODEWITHSUNDEEP
csshtmlcss-float
Mathias Bader
Mathias Bader

Reputation: 3826

Floating divs, equal height - fill space with additional div without overflow

I have two div-columns of different height which I like to have the same height. I achieved this using the padding-margin hack with the following css for my div-columns:

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

The html is displaying a flow-diagram. 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.

Example of the diagram

I tried to achieve this with an additional div with class .LineFilling that is a line going down, but I don't know how heigh the line should be. So I put

position: absolute;
overflow: hidden;

in the .lane1-class and made the .LineFilling-element of height 600px, but that doesn't work, since the overflow is displayed. Is there a way to have the .LineFilling-element extend to the end of the lane? Or extend further but the overflow being cut?

Thanks for help.

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

Upvotes: 6

Views: 882

Answers (6)

Andreas Daoutis
Andreas Daoutis

Reputation: 1205

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

Adding a new absolute element in the 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'll find them in the fiddle...

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

Is something like that what you want?

Upvotes: 2

avrahamcool
avrahamcool

Reputation: 14094

Pure CSS solution

Here is a DEMO of that solution.

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

all the column in a row will always have the same height, and the last arrow in the row will fill that space.

In the DEMO you can see 3 Rows. The First Row has the starting point, so no stretch needed there. The Second Row has 3 ElementsHolder, without stating anything special in the markup, 2 of them will stretch to fill the gap. The Third Row has 2 ElementsHolder, behave as expected.

notice that the stretching works regardless of the Elements height. (some of them have 2 or 3 lines of text, and it works perfectly)

If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)

The solution is done by using the new CSS flex model. the direction is set via flex-direction: row;, Each row has ElementsHolders that gets equal width.

each one of those ElementsHolder is also a flex box, but this time his direction is opposite (flex-direction: column;).

the child's of ElementsHolder are Elements & Arrows, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.

all of that is achieved using the flex property with the appropriate values.

More about the flex-model can be found HERE

Upvotes: 3

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

FlexBox could be worth a look too.

if you are ok with IE10 +

Auto Align Heights (CSS)

align-items: stretch

Good Reads here and here

Cheers,

Rob

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Yes it is possible with pure css. I have used display table-row and table-cell properties to achieve it.

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: probable solution DEMO

Upvotes: 5

chris
chris

Reputation: 4867


have you seen these 2 plugins?

jQuery Isotope
jQuery Mansonry

Eventually there is a solution for you!?
Take a look.

Upvotes: 1

pea.sandwell
pea.sandwell

Reputation: 61

Rather than adding another div to fill the space, wouldn't it be easier to add a class to the div on the left column, and style that to fill any spacing/line requirements you have?

So you could have:

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>

Upvotes: 1

Related Questions