By Veera


2011-01-26 12:32:22 8 Comments

I have the page structure as:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Now, the child-left DIV will have more content, so the parent DIV's height increases as per the child DIV.

But the problem is child-right height is not increasing. How can I make its height as equal to it's parent?

12 comments

@Sotiris 2011-01-26 12:44:38

For the parent element, add the following properties:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

then for .child-right these:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

@Eamon Nerbonne 2011-01-26 14:03:16

Your CSS results in undefined behavior - the parent's height depends on the childrens height, but the children have a percentage height defined in terms of the parent: this is invalid, and will likely not work in a cross-browser way.

@Eamon Nerbonne 2011-01-26 14:08:13

I see you're not floating everything - so that's defined at the cost of not scaling if ever the right column grows longer than the left (which indeed is not the case in the OP's question).

@Michael 2011-01-26 14:09:59

Yes, you need to add this: padding-bottom: 32768px; margin-bottom: -32768px; to the children.

@Eamon Nerbonne 2011-01-26 14:20:14

@Michael: what's that do?

@Michael 2011-01-26 14:33:06

32768px is the IE max padding, it will extend both columns to 32768px height but only like virtual so the real height will still be defined by content length. due this both columns will overflow the parent which will be hidden by overflow: hidden; result: 2 columns at the same height no matter what the content length

@Christoph 2012-05-30 11:50:34

This works as long as the right column is guaranteed to have fewer content then the left or else it will be clipped. Also I edited the answer to omit the useless declarations.

@Matthew Blackford 2012-06-08 04:38:33

The overflow:hidden is what solves my problem. Why does this work?

@Eamon Nerbonne 2013-02-15 15:32:47

@MatthewBlackford: it's a "hack" in that it prevent margin collapsing. You could prevent margin collapsing in other ways, such as using a 1px transparent border, but in essence, but the important thing here is that you avoid margin collapse. I wouldn't use this solution except as a last resort since it causes weird layout errors and unexpected cropping (or superimposed content) when your assumptions turn out to be faulty. In short: you don't want to do this unless you really need to.

@NaturalBornCamper 2013-05-22 05:21:40

In my case it worked without the right:0; so you can try without it first;

@JGallardo 2014-07-21 22:02:33

Your JS bin was vandalized...

@Windwalker 2015-11-18 13:57:25

The solution described herein, only seems to work if both column do have width assigned. In my case, the right column has a fixed width assigned, the left column doesn't. by "position: absolute", the right column is taken out of the floating, making the left column take all with up to the right margin, overlapping the right, absolutely positioned, column. Any hint to avoid this?

@Sotiris 2015-11-18 14:48:26

@Windwalker can you provide a jsbin of what you describe? Probably calc() can work in your case.

@Windwalker 2015-11-18 16:07:49

@Sotiris, great hint there! width: calc(100% - <sidebar width>) does indeed work to assign a width to the other column. Thanks.

@Joel Lim 2017-05-11 05:04:23

I learned of this neat trick in an internship interview. The original question is how do you ensure the height of each top component in three columns have the same height that shows all the content available. Basically create a child component that is invisible that renders the maximum possible height.

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>

@suketup 2016-10-25 18:49:10

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

I used inline style just to give idea.

@Eamon Nerbonne 2011-01-26 14:01:44

A common solution to this problem uses absolute positioning or cropped floats, but these are tricky in that they require extensive tuning if your columns change in number+size, and that you need to make sure your "main" column is always the longest. Instead, I'd suggest you use one of three more robust solutions:

  1. display: flex: by far the simplest & best solution and very flexible - but unsupported by IE9 and older.
  2. table or display: table: very simple, very compatible (pretty much every browser ever), quite flexible.
  3. display: inline-block; width:50% with a negative margin hack: quite simple, but column-bottom borders are a little tricky.

1. display:flex

This is really simple, and it's easy to adapt to more complex or more detailed layouts - but flexbox is only supported by IE10 or later (in addition to other modern browsers).

Example: http://output.jsbin.com/hetunujuma/1

Relevant html:

<div class="parent"><div>column 1</div><div>column 2</div></div>

Relevant css:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox has support for a lot more options, but to simply have any number of columns the above suffices!

2.<table> or display: table

A simple & extremely compatible way to do this is to use a table - I'd recommend you try that first if you need old-IE support. You're dealing with columns; divs + floats simply aren't the best way to do that (not to mention the fact that multiple levels of nested divs just to hack around css limitations is hardly more "semantic" than just using a simple table). If you do not wish to use the table element, consider css display: table (unsupported by IE7 and older).

Example: http://jsfiddle.net/emn13/7FFp3/

Relevant html: (but consider using a plain <table> instead)

<div class="parent"><div>column 1</div><div>column 2</div></div>

Relevant css:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

This approach is far more robust than using overflow:hidden with floats. You can add pretty much any number of columns; you can have them auto-scale if you want; and you retain compatibility with ancient browsers. Unlike the float solution requires, you also don't need to know beforehand which column is longest; the height scales just fine.

KISS: don't use float hacks unless you specifically need to. If IE7 is an issue, I'd still pick a plain table with semantic columns over a hard-to-maintain, less flexible trick-CSS solution any day.

By the way, if you need your layout to be responsive (e.g. no columns on small mobile phones) you can use a @media query to fall back to plain block layout for small screen widths - this works whether you use <table> or any other display: table element.

3. display:inline block with a negative margin hack.

Another alternative is to use display:inline block.

Example: http://jsbin.com/ovuqes/2/edit

Relevant html: (the absence of spaces between the div tags is significant!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

Relevant css:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

This is slightly tricky, and the negative margin means that the "true" bottom of the columns is obscured. This in turn means you can't position anything relative to the bottom of those columns because that's cut off by overflow: hidden. Note that in addition to inline-blocks, you can achieve a similar effect with floats.


TL;DR: use flexbox if you can ignore IE9 and older; otherwise try a (css) table. If neither of those options work for you, there are negative margin hacks, but these can cause weird display issues that are easy to miss during development, and there are layout limitations you need to be aware of.

@Wordpressor 2012-11-17 15:06:24

Good one, but it's worth to note that you're unable to use margins between these cells (and padding won't help if you want them styled).

@Eamon Nerbonne 2012-11-20 16:03:50

border-spacing:10px; on the table element will introduce margin-like spacing. Alternatively, you could add extra (empty) columns where you want extra space. And you could also add padding inside the table-cells; that padding will be included in the background however, so that may not be what you want. But you're right that it's not quite as flexible as a normal margin. And you can't position anything relative to the columns, which may be a problem.

@dynamic 2012-11-20 23:25:22

So it's better a table-less layout or not ?

@Eamon Nerbonne 2012-11-21 10:19:40

@yes123: you've got two choices: either you use a container with display:table (such as <table>) or you use floats. table-display is the only way to automatically scale the columns by height, and it's simpler - use that if you can. If you need finer control, you can use the float approach in Sotiris's answer; but you'll need to manually specify which column is longest and how wide each column should be.

@dynamic 2012-11-21 11:38:51

I have to say: I agree to you that in this case a simple table is more than enough. The problem is that there is a common view to disregard every layout with table

@Eamon Nerbonne 2012-11-21 12:01:35

Yeah; and I get the impression that <table>'s bad rep - for it's non-semantic nature - somehow makes people regard display: table askance even though the original complaint doesn't hold any more.

@dynamic 2012-11-21 12:48:10

@EamonNerbonne: I have opened a question regarding this. Please take a look: stackoverflow.com/questions/13493605/…

@Serj Sagan 2014-02-05 05:51:04

The problem with table is that when the screen is resized to a smaller width (responsive design) the table cells get squished instead of tiling one over the top of the next one. The second method with padding-bottom: 32768px; margin-bottom: -32768px; is quite amazing and does almost exactly what I needed...thanks for that one...border bottom is an issue though...

@Eamon Nerbonne 2014-02-05 09:41:42

Yep, that's an advantage; you could you a @media query to turn off columnar layout on thin viewport as an alternative too, however. (i.e. table-layout in wide mode; block layout in narrow mode). But if you can live with the limitations of the float / overflow hidden approach, by all means!

@Dishan TD 2015-03-26 09:35:05

Awesome !!! Thanks

@Nabil 2016-08-23 06:26:12

I think.. flex is the best approach.

@Lucha Laura Hardie 2016-09-28 13:50:09

I realize I'm commenting on something from years ago, but was it intended in the display:flex example to close the parent div before starting the second column div?

@Eamon Nerbonne 2016-09-28 19:43:46

@LuchaLauraHardie no, that was not the intent; I'll fix the example.

@Eamon Nerbonne 2016-09-28 20:00:05

@Nabil: yeah, I agree. Of course, back in 2011, that was a little fanciful ;-).

@Er.Naved Ali 2015-12-09 07:58:22

If you are aware of bootstrap you can do it easily by using 'flex' property.All you need to do is pass below css properties to parent div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

where .homepageSection is my parent div. Now add child div in your html as

<div class="abc col-md-6">
<div class="abc col-md-6">

where abc is my child div.You can check equality of height in both child div irrespective of border just by giving border to child div

@Aiphee 2014-04-25 18:25:49

For the parent:

display: flex;

For children:

align-items: stretch;

You should add some prefixes, check caniuse.

@user1537415 2015-02-12 10:19:48

Wouldn't recommend. IE9 is still a thing.

@Md Sifatul Islam 2018-02-06 07:05:34

Thank you for your answer; it works well! "You should add some prefixes, check caniuse." what do you mean by that line? Can you add little more information for beginners?

@Aiphee 2018-02-07 08:53:15

@MdSifatulIslam Go here: caniuse.com/#feat=flexbox You can see if some browser youu need to support needs feature prefix.

@Salman A 2011-01-26 13:05:58

CSS table display is ideal for this:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Original answer (assumed any column could be taller):

You're trying to make the parent's height dependent on the children's height and children's height dependent on parent's height. Won't compute. CSS Faux columns is the best solution. There's more than one way of doing that. I'd rather not use JavaScript.

@mikato 2015-03-02 17:25:45

Good point. How about if the children's height is dependent on the height of the tallest sibling (whether that be determined by the height of the parent or the not), and not the parent? I guess that can't be done in CSS.

@Salman A 2015-03-02 17:46:17

No, siblings cannot affect the height of each other. However, display: table + display: table-cell layout will produce the desired result.

@mikato 2015-03-03 22:43:45

Great update! However, I ended up trying this and I wanted to have whitespace separation between the divs/cells and ended up having to make inner divs within the table-cell divs to accomplish that and then of course lost the ability to make them use the full height because the inner divs weren't table-cell divs - exact same problem. Any ideas for that? Kind of missing cell-spacing now.

@mikato 2015-03-04 15:48:22

Ah, there is border-spacing in CSS! stackoverflow.com/questions/339923/… I was able to get my table-like divs working well with whitespace separation by using border-spacing. I now have the ability to make table cells (colored background blocks) use the full height of the parent or not by clever use of the table-cell divs.

@Joshua Pinter 2015-09-14 23:04:17

Just a gotcha that I ran into: you can't use this with float: stackoverflow.com/questions/20110217/…

@Salman A 2015-09-15 04:26:32

@JoshPinter you don't use floats with table cells.

@Joshua Pinter 2015-09-15 14:28:34

@SalmanA Thanks. I know that now but I was testing out the original poster's code who had both children floating left. I was wondering why your method wasn't working until I removed the float.

@larsgrafik 2014-05-29 08:39:47

I used this for a comment section:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

You could float the child-right to the right, but in this case I've calculated the widths of each div precisely.

@Andreas 2014-08-03 13:38:07

first thing that came to my mind was height:inherit not sure why nobody upvoted

@Tareq 2012-11-02 06:10:20

Please set parent div to overflow: hidden
then in child divs you can set a large amount for padding-bottom. for example
padding-bottom: 5000px
then margin-bottom: -5000px
and then all child divs will be the height of the parent.
Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}
<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Example: http://jsfiddle.net/Tareqdhk/DAFEC/

@cukabeka 2013-01-26 00:16:21

seems a bit dirty, but worked for me - the only solution on this question. I tried this using twitter bootstrap.

@Serj Sagan 2014-02-05 05:57:23

works, but border bottom needs creative approach...

@Dobromir Minchev 2013-02-19 08:26:41

I found a lot of answers, but probably the best solution for me is

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

You can check other solutions here http://css-tricks.com/fluid-width-equal-height-columns/

@Combine 2015-12-06 13:41:51

I have no idea why this work, but it solves my problem like a charm. Thank you

@Mark Anthony Uy 2016-02-02 05:53:55

Works for me too. Even though it's not the clean way. Thanks!

@FedericoCapaldo 2016-06-15 09:46:20

hacky as hell. I do not recommend this for a production applications

@Tom McDonough 2018-09-19 21:25:59

this is amazing haha. I didn't think this would actually work

@Olical 2011-01-26 12:37:57

Does the parent have a height? If you set the parents height like so.

div.parent { height: 300px };

Then you can make the child stretch to the full height like this.

div.child-right { height: 100% };

EDIT

Here is how you would do it using JavaScript.

@Veera 2011-01-26 12:40:17

parent does not have a fixed height. It is expanding as per the child-left height.

@Olical 2011-01-26 12:41:04

Ah, I thought as much, then you are going to need some JavaScript, I will append it in a second.

@itsmysterybox 2018-10-31 14:28:53

@Olical JSFiddle link is broken. Either remove it or update the answer. Thanks!

@Chanoch 2018-11-29 10:55:29

The link to js now gives a 404

@ajcw 2011-01-26 12:41:26

I have recently done this on my website using jQuery. The code calculates the height of the tallest div and sets the other divs to the same height. Here's the technique:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

I don't believe height:100% will work, so if you don't explicitly know the div heights I don't think there is a pure CSS solution.

@netAction 2015-07-17 07:30:03

You should trigger this at least on ready, resize, orientation change, font resize.

Related Questions

Sponsored Content

44 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

26 Answered Questions

[SOLVED] How to force child div to be 100% of parent div's height without specifying parent's height?

  • 2009-07-13 22:14:05
  • user137726
  • 852946 View
  • 496 Score
  • 26 Answer
  • Tags:   html css

13 Answered Questions

[SOLVED] CSS 100% height with padding/margin

  • 2009-01-27 23:28:18
  • Toji
  • 316852 View
  • 789 Score
  • 13 Answer
  • Tags:   css

31 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1837864 View
  • 1992 Score
  • 31 Answer
  • Tags:   html css height

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 893555 View
  • 1704 Score
  • 31 Answer
  • Tags:   html css html-table

21 Answered Questions

[SOLVED] Expand a div to fill the remaining width

15 Answered Questions

[SOLVED] How do you keep parents of floated elements from collapsing?

16 Answered Questions

[SOLVED] Expanding a parent <div> to the height of its children

  • 2008-12-21 05:39:54
  • Steve Horn
  • 387164 View
  • 287 Score
  • 16 Answer
  • Tags:   html css

4 Answered Questions

[SOLVED] Position absolute but relative to parent

  • 2012-05-07 18:41:54
  • BlaShadow
  • 298002 View
  • 397 Score
  • 4 Answer
  • Tags:   html css

4 Answered Questions

[SOLVED] how to expand child "div" height to parents height

  • 2015-01-14 08:47:31
  • ankit gupta
  • 489 View
  • 0 Score
  • 4 Answer
  • Tags:   html css

Sponsored Content