Same height divs?

Question

I have a the following:

<div class="container">
   <div class="sectionA">
   </div>
   <div class="sectionB">
   </div>
</div>

Section A has a red background, Section B has a blue background.

Section A has lots of text in it, making it quite tall, section B does not have much text in it.

How can I make it so that Section A and B are the same height as the parent?

what do you mean same height as their parent ? each has its own height and their parent have the sum of their both heights. what do you mea n? — Royi Namir, May 04 '13 at 15:47
Same height as the parent, or the same height as the taller of A and B? — JJJ, May 04 '13 at 15:48
What type of browser support are you looking for? IE7? Within `sectionA` or `sectionB`, do to you want the text to be aligned vertically? Does the parent `.container` have a specified height? — Marc Audet, May 04 '13 at 15:55
Try [this](http://www.html5rocks.com/en/tutorials/flexbox/quick/) — lavrik, May 04 '13 at 15:57
Possible duplicated: http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height — cortex, May 04 '13 at 16:16

score 1 · Answer 1 · answered May 04 '13 at 16:01

Yes, you can give the childs the same heights as the parent. This will work:

<html>
<head>
</head>
<body>

<div class="container">
   <div class="sectionA">Lorem ipsum dolor sit amet.
   </div>
   <div class="sectionB">Lorem ipsum dolor sit amet.
   </div>
</div>

</body>
</html>

The CSS:

.container{height:200px;width:500px;overflow:hidden}
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%}
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}

score 0 · Answer 2 · answered May 04 '13 at 16:13

0

If you dont mind about using jquery,

    $('.sectionB').css('height', $('.sectionA').outerHeight() );

sectionB css height is set by the sectionA outerHeight.

answered May 04 '13 at 16:13

Denny Mueller

3,505
5
36
67

score 0 · Answer 3 · answered May 04 '13 at 16:20

0

Take a look to this jsbin.

Hope this helps!

answered May 04 '13 at 16:20

cortex

5,036
3
31
41

score 0 · Answer 4 · answered May 04 '13 at 16:24

0

If you want to do this in dynamically, I think you need to use jquery/javascript to handle otherwise you can use height property. Use the suitable highest value for both sections.

answered May 04 '13 at 16:24

newday

3,842
10
54
79

score 0 · Answer 5 · answered May 04 '13 at 21:54

Faux-Column Effect Using <div> and CSS

One way of doing this involves adding an extra element as follows:

<div class="container">
    <div class="backdrop"></div>
    <div class="sectionA">
        <p>Text of A... can be on a red background.</p>
        <p>Lorem ipsum dolor... and long text block.</p>
    </div>
    <div class="sectionB">
        <p>Text of B... can be on a blue background.</p>
    </div>
</div>

I am going to add an extra element <div class="backdrop">, which you could replace with an pseudo-element if so desired.

The appropriate CSS is as follows:

.container {
    overflow: hidden;
    color: white;
    background-color: red;
    position: relative;
}

.sectionA {
    float: left;
    width: 48%;
    padding: 1%;
}
.sectionB {
    float: left;
    width: 48%;
    padding: 1%;
    position: relative;
    z-index: 2;
}

.backdrop {
    position: absolute;
    background-color: blue;
    width: 50%;
    height: 3000px;
    top: 0;
    left: 50%;
    z-index: 1;
}

The parent .container element is given the background-color for the left-hand side column (red), with overflow: hidden and position: relative.

The two child/column elements are placed using float: left, and given a relative width of 48% and padding of 1% (you can adjust these measurements as needed).

Finally, .backdrop is positioned absolutely and placed to the right hand side of the parent container. I set it to have a tall height to make sure that it stretches beyond any expected height of any of the two columns, and declare the background-color: blue.

Use z-index to move the floated .sectionB to be painted above .backdrop. Note that you need set position .sectionB relatively so that the z-index value takes effect.

Since .container uses overflow:hidden, the tall backdrop element is clipped so you can the effect that you want.

Using a background-image could also work. You could create a background image with the left hand side red and the right hand side blue, and tile it vertically with position top and center, just making the width is wide enough to accommodate any expected page width.

The main advantage of using div.backdropis that you can alter the color scheme using CSS properties alone without changing the background image.

Fiddle demo: http://jsfiddle.net/audetwebdesign/yejss/

Same height divs?

5 Answers5