Home/ Questions/Q 3635514
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T00:54:49+00:00

I don’t know how to ask this without a picture. I have two divs,

  • 0

I don’t know how to ask this without a picture. I have two divs, side-by-side, within another div with padding and margins as such. This is what I WANT to achieve:

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

but here is what I get. I am able to float the divs and compensate for margins, etc, but I can’t get div C to extend to the entire height of A. Neither A nor B have a fixed height, so how do I get C to extend to the full height of A?

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+----------------------------------------------------------------------------+

The height of A is stretched by the height of B. It’s an entirely fluid layout too, so the width isn’t fixed either. Basically, I need C to extend the entire height of A.

I tried playing around with all the heights, but I can’t get it to work because the heights aren’t fixed 🙁

A is just a div wrapper basically, no padding, no margin.
B is actually composed of two divs with margin and padding, float:left;
C is just one div, float:right;

EDIT:
I need to support IE as well, WITHOUT CSS hacks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is lots written on the net about CSS equal column heights. The solution that I generally use is to use jQuery to calculate the max height of all the columns, and then use jQuery to set the heights of all the columns to the same thing. I normally do this by hand, but there are some plugins that accomplish the task.

    If the columns need to be the same height for purely visual reasons, you can be creative with background images on the columns to give the illusion of equal height. This doesn’t always work, depending on your design, but I have used it in the past.

    • 0