0

I have two divs next to each other while floating right. I want these divs to remain the same height even when one div changes height. I believe i can use display: flex for this, however when i use this my float gets removed and the container gets placed top left.

.flex {
  min-height: 300px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
}

.container-B {
  flex: 1;
}

.float-right {
  float: right;
}
<div class="row flex">
  <div class="float-right col-md-5 container-B">
    <div>Content</div>
    <div class="float-right col-md-5 container-B">
      <div>Content</div>
    </div>
  </div>
biberman
  • 5,606
  • 4
  • 11
  • 35
JBear
  • 1
  • 2
    what should be your final result? – DecPK May 12 '21 at 08:24
  • You're missing a `` somewhere. It isn't clear where it is supposed to go (the indentation and the generate structure suggest different places). – Quentin May 12 '21 at 08:25
  • If you omit ```display: flex``` for the container both content divs are on top of each other. Is this the desired behavior or should they be side by side? – biberman May 12 '21 at 08:29

1 Answers1

0
1.flex {
2  min-height: 300px;
3  margin: 0 auto;
4  display: -webkit-flex;
5  display: flex;
6}
7
8.container-B {
9  flex: 1;
10}
11
12.float-right {
13  float: right;
14}
15<div class="row flex">
16  <div class="float-right col-md-5 container-B">
17    <div>Content</div>
18    <div class="float-right col-md-5 container-B"> ------You forgot to close the <div>
19      <div>Content</div>
20    </div>
21  </div>

On line 18 you forgot to close the <div>.
Your code have to be like this:

<div class="row flex">
  <div class="float-right col-md-5 container-B">
    <div>Content</div>
    <div class="float-right col-md-5 container-B"></div>
      <div>Content</div>
    </div>
  </div>

Also, tide your code, so the final result will look like this:

.flex {
  min-height: 300px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
}

.container-B {
  flex: 1;
}

.float-right {
  float: right;
}
<div class="row flex">
  <div class="float-right col-md-5 container-B">
    <div>Content</div>
    <div class="float-right col-md-5 container-B">
      <div>
        Content
      </div>
    </div>
  </div>
</div>

[Note: reduce the uses of <div>, use <p>, and <h1,2,3,4,5,6> instead]

Liqui Kal
  • 61
  • 7