CODEWITHSUNDEEP
html
Andromeda
Andromeda

Reputation: 12897

HTML Div height problem

I have two div element in my page aligned vertically. content of one div is fixed, but the content of other div varies so its height. i want to make both the div of same height. how can i do that??

Upvotes: 2

Views: 2778

Answers (2)

Oli
Oli

Reputation: 239988

Well there are two ways:

Use CSS with a fake background

For this you'll need to make an image of your background containing both columns as you'd expect to see them. Display this on whatever holds the columns and now the columns will look the same height even if they are not.

You might need to add a new wrapping div to apply the background:

<div class="colwrap">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

<div class="colwrap">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Or, use jQuery (or other) to fix the heights

This is slightly more manual but if you have other JS scripts firing off, this shouldn't be too tough.

if ($('col:1').height() > $('col:2').height())
    $('col:2').height($('col:1').height());
else
    $('col:1').height($('col:2').height());

or something like that would do it.

Upvotes: 2

MaxVT
MaxVT

Reputation: 13244

The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells.

Full explanation and demo

also: Equal Height Columns using CSS

Upvotes: 4

Related Questions