1

I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.

4 Answers 4

1

Assuming the elements are after body. Give 100% to the body, and all the div

body, #div1, #div2 { height: 100%; }

If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.

#parent { height: 800px; }
#div1,#div2 { height: 100%; }
0
1

Enclose those divs in a parent div, and set their height to 100%.

0

You simply need a three-column (X)HTML + CSS Layout.

It's here

0
  1. Let insert a parent div (container of those two adjacent divs)
  2. add a property 'display: flex;' to the parent div

.parent{
  display: flex;
}

.child1, .child2{
  padding: 10px;
  border: 1px solid gray;
}
<body>
    <div class="parent">
        <div class="child1">
            CHILD 1 AREA<br />
            CHILD 1 AREA
        </div>
         <div class="child2">
             CHILD 2 AREA
        </div>
    </div>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.