How to keep the div dimensions-CodePudding

Please consider the code below:

<head>
  <title></title>
  <style>
    .section_divs {
      background-color: lightblue;
      float: left;
    }
    
    #section_empty {
      background-color: tomato;
      width: 10%;
    }
    
    #section_words {
      width: 80%;
    }
  </style>
</head>

<body>
  <section>
    <div  id="section_empty">a</div>
    <div  id="section_words">a</div>
    <div  id="section_empty">a</div>
  </section>
</body>

My problem is when I omit the letter a inside the div from:

<div  id="section_empty">a</div>

<div  id="section_empty"></div>

That div disappear, I want to know why this is happening? and is there any way that div can still have dimensions same as the other divs?

CodePudding user response：

Try with flexbox instead of floats. The parent element needs display: flex applied then give every child element a default width: 10% and add an additional class to the center div with flex-grow: 1 for it to consume remaining space.

.container {
  display: flex;
}

.item {
  height: 50px;
  width: 10%; /* default size */
  background: tomato;
}

.item-center {
  flex-grow: 1; /* middle div will grow and stretch */
  background: lightblue;
}

<div >
  <div >a</div>
  <div >a</div>
  <div >a</div>
</div>

<br />

<div >
  <div >a</div>
  <div ></div>
  <div >a</div>
</div>

CodePudding user response：

If it's empty, the default height is 0.

If it has elements in it, height will fit content by default.

If you want to keep it at a specific height when it's empty, then give it min-height

 <head>
    <title></title>
    <style>
      .section_divs {
        background-color: lightblue;
        float: left;
        min-height: 18px;
      }
      
      #section_empty {
        background-color: tomato;
        width: 10%;
      }
      
      #section_words {
        width: 80%;
      }
    </style>
  </head>
  
  <body>
    <section>
      <div  id="section_empty"></div>
      <div  id="section_words">b</div>
      <div  id="section_empty">c</div>
    </section>
  </body>