CODEWITHSUNDEEP
htmlcss
Ing. Michal Hudak
Ing. Michal Hudak

Reputation: 5622

equal height of two columns

I have 2 columns. One have dynamic height.

I want to second column adjust to same height as column one.

Question:

How to set height to div two to have same height as div one ?

Note: looking for css/html solution (NO JS)

JSFIDDLE:

JsFiddle example

HTML:

<div class="one"></div>
<div class="two"></div>
<div style="clear: both;">

CSS:

.one {height: 300px; float: left; width: 70%;}
.two {height: 50px; float: left; width: 30%;}

Upvotes: 1

Views: 69

Answers (1)

Love Trivedi
Love Trivedi

Reputation: 4056

Just use this modified css and html DEMO HERE

HTML

<div class="wraper">
    <div class="one"></div>
    <div class="two"></div>
    <div style="clear: both;">
</div>

CSS

body{
    width:100%;
}
.wraper{
    display:table;
    width:100%;
}
.one {height: 300px; background: #f00; display:table-cell; width: 70%;}
.two {height: 50px; background: #000;  display:table-cell; width: 30%;}

Upvotes: 2

Related Questions