Question

99

How do I achieve equal height divs (positioned side by side) with HTML / CSS ?

rated 0 times [ 101] [ 2] / answers: 1 / hits: 49353 / 15 Years ago, mon, june 29, 2009, 12:00:00

I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.

For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?

Is there some JavaScript (jQuery) code to accomplish this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elaine

Add To Favorites

Follow

Total Points: 628

Total Questions: 111

Total Answers: 104

Location: Marshall Islands

Member since Tue, Sep 21, 2021

3 Years ago

elaine questions

1 Could not reach Cloud Firestore backend - React native Firebase v9

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Add Multiple Sheets in a workbook using npm XLSX in ReactJS

Mon, Jun 28, 21, 00:00, 3 Years ago

1 Uncaught SyntaxError: '' string literal contains an unescaped line break

Tue, Feb 16, 21, 00:00, 3 Years ago

1 React native render list of components

Wed, Dec 11, 19, 00:00, 5 Years ago

1 Loading images in vue.js from an API

Sun, Nov 3, 19, 00:00, 5 Years ago

View All

answered 15 Years ago emanir · Accepted Answer

You could use jQuery, but there are better ways to do this.

This sort of question comes up a lot and there are generally 3 answers...

1. Use CSS

This is the 'best' way to do it, as it is the most semantically pure approach (without resorting to JS, which has its own problems). The best way is to use the display: table-cell and related values. You could also try using the faux background technique (which you can do with CSS3 gradients).

2. Use Tables

This seems to work great, but at the expense of having an unsemantic layout. You'll also cause a stir with purists. I have all but avoided using tables, and you should too.

3. Use jQuery / JavaScript

This benefits in having the most semantic markup, except with JS disabled, you will not get the effect you desire.