Set border of parent <div> depending on 2 child <div>

This question already has an answer here:

How do you keep parents of floated elements from collapsing? [duplicate] 16 answers

---

Your .frame div height become zero as there is no other content apart from the floated div childs, and that's how CSS works. Add this part of code to your .frame class

.frame{
    overflow: hidden;
}

Using overflow: hidden; would create a block formatting context. It would render block boxes in which floats interact with each other.

More at: Block formatting context

---

The problem is that your frame doesn't get a height because all the children are floating. You can solve this by adding overflow: hidden; to the frame class.

---

While using float on children, don't forget to set layout on parent elements. There are many ways of setting layouts. For example

.frame {
    overflow: hidden;
}

Or you can use :after pseudo element:

.frame:after {
    content: '';
    display: block;
    clear: both;
}

.frame {
  border-style: solid;
  border-color: green;
  overflow: hidden;
  width: 500px;
}
.left {
  float: left;
  min-height: 20px;
  width: 200px;
  min-height: 20px;
}
.right {
  float: right;
  min-height: 20px;
  width: 300px;
}
.entry {
  height: 20px;
}

<div class="frame">
  <div class="left">
    <div class="entry">
      key
    </div>
  </div>
  <div class="right">
    <div class="entry">
      value
    </div>
    <div class="entry">
      value
    </div>
    <div class="entry">
      value
    </div>
  </div>
</div>

链接地址: http://www.djcxy.com/p/88430.html

上一篇: 为什么阻止div没有获得高度自动？

下一篇: 根据2个孩子<div>设置父母<div>的边框