Tips for maintaining the size of a div container

Question

Tips for maintaining the size of a div container

Take a look at the following code snippet:

<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 class="section_divs" id="section_empty">a</div>
    <div class="section_divs" id="section_words">a</div>
    <div class="section_divs" id="section_empty">a</div>
  </section>
</body>

The issue arises when I remove the letter 'a' inside the div tags from:

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

to

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

In this scenario, the div disappears. I am puzzled as to why this happens and whether there is a way to maintain the dimensions of the div identical to the other divs?

html css

Answer 1

Answer №1

Utilize flexbox instead of using floats. To achieve this, apply display: flex to the parent element and assign a default width of 10% to each child element. Additionally, create a special class for the center div with flex-grow: 1 to make it expand and fill up any 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 class="container">
  <div class="item">a</div>
  <div class="item item-center">a</div>
  <div class="item">a</div>
</div>

<br />

<div class="container">
  <div class="item">a</div>
  <div class="item item-center"></div>
  <div class="item">a</div>
</div>

Answer 2

Utilize flexbox instead of using floats. To achieve this, apply display: flex to the parent element and assign a default width of 10% to each child element. Additionally, create a special class for the center div with flex-grow: 1 to make it expand and fill up any 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 class="container">
  <div class="item">a</div>
  <div class="item item-center">a</div>
  <div class="item">a</div>
</div>

<br />

<div class="container">
  <div class="item">a</div>
  <div class="item item-center"></div>
  <div class="item">a</div>
</div>

Answer 3

Answer №2

When devoid of content, the default height is set to 0.

If there are elements present within, the height will automatically adapt to fit the content.

To maintain a specific height even when empty, utilize the min-height property.

 <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 class="section_divs" id="section_empty"></div>
      <div class="section_divs" id="section_words">b</div>
      <div class="section_divs" id="section_empty">c</div>
    </section>
  </body>

Answer 4

When devoid of content, the default height is set to 0.

If there are elements present within, the height will automatically adapt to fit the content.

To maintain a specific height even when empty, utilize the min-height property.

 <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 class="section_divs" id="section_empty"></div>
      <div class="section_divs" id="section_words">b</div>
      <div class="section_divs" id="section_empty">c</div>
    </section>
  </body>

Tips for maintaining the size of a div container

Answer №1

Answer №2

Similar questions

The functionality of my website is not optimized for viewing on iPhones

Send form data using ajax technology

Experiencing difficulty transmitting information from the view to the controller within CodeIgniter

How to interact with a C# List using JavaScript

How come my footer is appearing at the top of my webpage?

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

Selectize-dropdown menu shines brightly as it opens upwards

Is it possible to modify the appearance of the element that was just clicked on?

In-depth preg_match_all analysis

Perfectly aligning the Update Progress Animation in real-time

Expanding the axes using Google Charts

Choosing JavaScript

CSS navigation bar (background gradient problem)

Minimizing Unused Space After Media Query Adjustment

working with html data in a bootstrap modal using javascript

Is there a solution to move my navbar that is frozen halfway on the screen?

.toggleClass malfunctioning inexplicably

ensured maximum height of a div attached to the bottom

Incorporating an image as a clickable element instead of a traditional button using HTML and

Necessary Selection from Dropdown