CODEWITHSUNDEEP
csshtmlcentering
Luke
Luke

Reputation: 855

Preserving div parent height alongside child div content horizontal centering

So I have been searching around trying to figure out how to make a parent div's height equal to that of its largest child, while making the children all the same maimum height and enforcing a horizontal vertical center on all the children, which may contain images. In short, the result of using a table with two columns and one row, with align and valign set to center.

For the following html,

<div class="outer">
    <div class="inner">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>

the css for making all children the same (maximum) height, such that the centering of the contents of each column is possible while expanding the parent to encompass and not hide its child data is...?

Initially I tried to use this, but it did not correctly expand each column to the maximum height, and thus preventing the desired vertical centering of the contents of each child.

Some also suggested using the overflow: overlay; or overflow:auto; css property, but this produced scroll bars everywhere.

Any help would be great... Tables are looking really good right now...

Upvotes: 0

Views: 159

Answers (1)

Ali Bassam
Ali Bassam

Reputation: 9969

Have you tried display:inline-block; ?

.col1,.col2
{
    display:inline-block;
    vertical-align:middle;
    width:200px;
    border-style:solid;
}
.inner
{
    border-style:solid;
    text-align:center;
}
.col1
{
    height:300px;

}
.col2
{
    height:200px;
}

The two columns will be beside each other, and the height of .inner will be decided by the tallest column, in this situation, .col1. Check it out : DEMO

Upvotes: 2

Related Questions