CODEWITHSUNDEEP
htmlcss
zyphal
zyphal

Reputation: 79

How do I make my two side by side divs the same height?

My code @ JSFiddle

code that is needed
for linking JSFiddle
links
I don't understand why I need
this.

An image of the two divs, their the gray boxes.

How can I make these two divs the same height? I don't want to do the padding-bottom: px; and margin-bottom: -px; It seems really like cheating and just rigged.

Upvotes: 1

Views: 87

Answers (1)

Alex Char
Alex Char

Reputation: 33218

You can use display:table and display:table-cell:

#who-is {
    width: auto;
    display: table;
}

#left {
    width: 40%;
    padding: 5%;
    text-align: center;
    background: #CCC;
    display: table-cell;
}

#left h1 {
    font-size: 72px;
    text-transform: uppercase;
}

#right {
    width: 40%;
    padding: 5%;
    background: #eee;
    display: table-cell;
}

#right p {
    font-size: 16px;
}

fiddle

Upvotes: 1

Related Questions