CODEWITHSUNDEEP
htmlcssheightvertical-alignment
pumpkinzzz
pumpkinzzz

Reputation: 2967

fit div height according to parent div, then vertical-align div content

i have 2 div children floated (left and right) in 1 row. First div's height is higher then second div. So what i want to do is:

  1. Fit second div height according to the parent container, so it will be the same for both children
  2. Vertical-align the content of the second div

I tried

.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}

but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).

I also would like to avoid using table if it's possible.

this is my fiddle: http://jsfiddle.net/qYBfu/2/

Thanks

Upvotes: 0

Views: 935

Answers (4)

driera
driera

Reputation: 36

This technique just uses css :before pseudo-element, without absolute positioning

.container { white-space: nowrap; text-align: center; }

You can avoid the text-align, just add it if you want your boxes centered

.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }

.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }

DEMO: http://jsfiddle.net/qYBfu/9/

Upvotes: 0

T J
T J

Reputation: 43156

You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.

for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)

.container {
 position:relative;
 overflow: hidden;
}
#boxLeft {
 width: 50%;
 display:inline-block;
 background: silver;
}
#boxRight {
 display:-webkit-flex;
 -webkit-align-items:center;
 -webkit-justify-content:center;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 width: 50%;
 background: pink;
 text-align:center;
}

JSFiddle

Upvotes: 0

avcajaraville
avcajaraville

Reputation: 9084

For make both divs containers same "height", you can use the following code:

 #boxRight{ width: 50%; float: right;  background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }

http://jsfiddle.net/qYBfu/5/

And what is not clear for me is if you want to align the right content in the middle of the column.

In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.

Upvotes: 1

naota
naota

Reputation: 4718

You might want to use display:table like this:

DEMO:http://jsfiddle.net/qYBfu/4/

.container { 
    display:table;
}
#boxLeft{ 
    display:table-cell;
}
#boxRight{ 
    display:table-cell;
}

You can check this question: Are floats bad? What should be used in its place

Hope this helps:

Upvotes: 1

Related Questions