Set border of parent
depending on 2 child

Question

I want a border around a <div> with 2 child elements. At the moment the green border is just at the top and not all around the <div> container. Can you tell me how to fix this issue?

Here you can see my code:

.frame {
    border-style: solid;
    border-color: green;
    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>

Choose an option from here: http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use — Salman A, Sep 19 '16 at 11:29
@MarcosPérezGude How do you suggest to create an equal structure ? — JohnDizzle, Sep 19 '16 at 11:31
You have tons of techniques, `inline-block`, `flexbox`, `table-cells`, etc. But layout with floats makes you to coding an specific HTML+CSS for that code, turning crazy to change it in the future. — Marcos Pérez Gude, Sep 19 '16 at 11:34

Hitesh Misro · Accepted Answer · 2016-09-19T12:13:47.187

3

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

edited Sep 19 '16 at 12:13

answered Sep 19 '16 at 11:27

Hitesh Misro

3,397
1
21
50

3

The famous dangerous trick to avoid float craps. The best solution is don't use floats for layouts, only use it to float real floating elements – Marcos Pérez Gude Sep 19 '16 at 11:29
1

However, since this solve the problem, my upvote is for you :) – Marcos Pérez Gude Sep 19 '16 at 11:31
2

To improve your answer, you can tell OP why this is a trick and not a solution, and why the problem solves. You will obtain more upvotes ;) – Marcos Pérez Gude Sep 19 '16 at 11:32

score 1 · Answer 2 · answered Sep 19 '16 at 11:29

1

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.

answered Sep 19 '16 at 11:29

Ravenix

1,010
4
15
40

score 1 · Answer 3 · answered Sep 19 '16 at 11:31

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>

Set border of parent depending on 2 child

3 Answers3

Set border of parent
depending on 2 child