Adjust the size of the child div to fit the remaining space within the parent div

Question

Adjust the size of the child div to fit the remaining space within the parent div

I'm dealing with a situation where there are two child divs inside a parent div. The first child div takes up 32% of the width, while the second child div takes up 68% of the width. If I were to set the display of the first child div to "none", how can I ensure that the second child div expands from its original 68% width to fill 100% of the available space? Any suggestions or tips would be greatly appreciated!

.parent {
    width: 400px;
    height: 200px;
    position: relative;
    float: left;
    display: inline-block;
}

.child1 {
    width: 32%;
    height: 100%;
    float: left;
    background-color: green;
}

.child2 {
    width: 68%;
    height: 100%;
    float: left;
    background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

html css

Answer 1

Answer №1

If I had to choose one tool to handle layout challenges, it would be the power of utilizing flexbox!

By setting flex: 0 0 32%; on the first child element, we can establish a width of 32%.

Assigning flex: 1; to the second child element ensures that it fills all available space. This means if the first child element is removed, the second child will expand to occupy the remaining space.

.parent {
  width: 400px;
  height: 200px;
  display: flex;
}

.child1 {
  flex: 0 0 32%;
  background-color: green;
}

.child2 {
  flex: 1;
  background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 2

If I had to choose one tool to handle layout challenges, it would be the power of utilizing flexbox!

By setting flex: 0 0 32%; on the first child element, we can establish a width of 32%.

Assigning flex: 1; to the second child element ensures that it fills all available space. This means if the first child element is removed, the second child will expand to occupy the remaining space.

.parent {
  width: 400px;
  height: 200px;
  display: flex;
}

.child1 {
  flex: 0 0 32%;
  background-color: green;
}

.child2 {
  flex: 1;
  background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 3

Answer №2

Using flex instead of float and applying display: none to one element will automatically adjust the other element for you:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.child1').classList.toggle('hidden');
})

.parent {
    width: 400px;
    height: 200px;
    position: relative;
    display: flex;
}

.child1 {
    flex: 0 0 32%;
    background-color: green;
}

.child2 {
    flex: 1 1 auto;
    background-color: red;
}

.hidden {
  display: none;
}

button {
  margin-bottom: 1em;
}

<button>Toggle child1 visibility</button>

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 4

Using flex instead of float and applying display: none to one element will automatically adjust the other element for you:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.child1').classList.toggle('hidden');
})

.parent {
    width: 400px;
    height: 200px;
    position: relative;
    display: flex;
}

.child1 {
    flex: 0 0 32%;
    background-color: green;
}

.child2 {
    flex: 1 1 auto;
    background-color: red;
}

.hidden {
  display: none;
}

button {
  margin-bottom: 1em;
}

<button>Toggle child1 visibility</button>

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 5

Answer №3

Instead of utilizing the float property, consider using Flexbox for a more effective layout solution. For further insight, refer to this link.

You can implement this in Flexbox by incorporating the following code:

.parent {
    width: 400px;
    height: 200px;
    display: flex;
}

.child1 {
    height: 100%;
    background-color: green;
    flex:1;
}

.child2 {
   // display:none;
    height: 100%;
    flex:2;
    background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 6

Instead of utilizing the float property, consider using Flexbox for a more effective layout solution. For further insight, refer to this link.

You can implement this in Flexbox by incorporating the following code:

.parent {
    width: 400px;
    height: 200px;
    display: flex;
}

.child1 {
    height: 100%;
    background-color: green;
    flex:1;
}

.child2 {
   // display:none;
    height: 100%;
    flex:2;
    background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 7

Answer №4

Here is a solution using the provided method.

  <div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
    width: 400px;
    height: 200px;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.box1 {
    width: 32%;
    height: 100%;
    float: left;
    background-color: green;
}

.box2 {
    width: 100%;
    height: 100%;
    background-color: blue;
}

Answer 8

Here is a solution using the provided method.

  <div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
    width: 400px;
    height: 200px;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.box1 {
    width: 32%;
    height: 100%;
    float: left;
    background-color: green;
}

.box2 {
    width: 100%;
    height: 100%;
    background-color: blue;
}

Adjust the size of the child div to fit the remaining space within the parent div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Inserting images into an HTML table using JavaScript in real-time

Semantic UI utilizes floating elements to position them within a

Issue with mix-blend-mode causing text to not show up on top of the gradient

What is the reason my bootstrap carousel isn't functioning properly?

What is the best method for retrieving the entire row data based on the maximum value in a column?

What is the best way to align text in the middle of a div using Foundation framework?

Is it possible to integrate Processing JS on top of an HTML element?

Eliminate the see-through effect from a logo positioned in a fading container

Slide the menu off to the right

Tips for moving text within a Canvas using a button to trigger the function that displays the text in a Javascript environment

When the script is placed at the end of the file, document.getElementById() is still returning null

The fullscreen API allows for the creation of a full-screen element containing internal elements, while also enabling the functionality

Place an IconButton component next to each Material UI TableRow

html2canvas encountered a CORS error when trying to retrieve images from an external domain

Google App Engine displaying a blank screen error

Preserve the location of a moveable div using jQuery

JavaScript tutorial: Locate a specific word in a file and display the subsequent word

issue with JavaScript canvas

Having trouble accessing the templateUrl for HTML in Angular version 1.6

iPad screen not displaying overflow for x and y axis