Balázs Orbán Balázs Orbán - 1 month ago 15
CSS Question

Distribute 3 chlidren in a parent

I have a div with three divs in it like this:

#parent
#child-1
#child-2
#child-3


And I want it to look like this:

The desired layout

Child 2 should use up the available space vertically, because child-3 is display:none as default, and only on some event it would show up, so it should push child-2 up. child-3 should be as high as it needs to be as well.

I like to use flexbox, but I think I cannot use it here.
It would be really easy to put them in another div, and just do a flex on that box and flex-direction:column, but I do not have this opportunity, so they will be in the same div as child-1.

So what is the easiest way to accomplish this with pure CSS without touching the HTML structure?

Answer

Here's one working example:

         #parent {
            height: 50em;
         }
         div[id^=child] {
            border: 2px solid black;
            box-sizing: border-box;
         }
         #child1 {
            height: 100%;
            min-height: 32em;
            background: red;
            width: 30%;
            float: left;
            margin: 0;
         }
         #child2 {
            height: 60%;
            background: green;
            width: calc(70% - .4em);
            margin-left: calc(30% + .4em);
            margin-bottom: .4em;
         }
         #child3 {
            height: calc(40% - .4em);
            min-height: 10em;
            background: yellow;
            width: calc(70% - .4em);
            margin-left: calc(30% + .4em);
         }
<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>The HTML5</title>
   </head>
   <body>
      <div id="parent">
         <div id="child1">
         </div>
         <div id="child2">
         </div>
         <div id="child3">
         </div>
      </div>
   </body>
</html>

Comments