Expanding a div's size with CSS to fill the remaining space

Question

Expanding a div's size with CSS to fill the remaining space

Here's the setup I'm working with:

<div class="parent">
   <div class="moverBoy"></div>
   <div class="smartBoy"></div>
</div>

The parent element is fixed at 100x20 indefinitely.

moverBoy and smartBoy are always 20 units in height, displayed as inline-block elements with vertical-align: top to ensure they line up next to each other without any white space or text interference.

The width of moverBoy can change dynamically through JS or CSS animations. My goal is to have smartBoy adjust its width accordingly to always fill up the remaining space within the parent element.

javascript html css

Answer 1

Answer №1

To achieve your desired outcome, you can make use of the float property on .moverBoy and adjust the overflow property of .smartBoy (This method is compatible even with older browsers like IE6):

window.onload = function(){
  document.getElementsByClassName('moverBoy')[0].style.width = '100px';
}

body{ margin:0 }
.moverBoy{
    float: left;
    background:#F00;
    width:300px;
    transition: width 2s;
}
.smartBoy{
    overflow hidden;
    background:#0F0;
}

<div class="parent">
   <div class="moverBoy">&nbsp;</div>
   <div class="smartBoy">&nbsp;</div>
</div>

Alternatively, another approach is to style your elements like a table:

window.onload = function(){
  document.getElementsByClassName('moverBoy')[0].style.width = '100px';
}

body{ margin: 0; }
.parent{
    display:table;
    width: 100%;
}
.moverBoy{
    display: table-cell;
    background:#F00;
    width:300px;
    transition: width 2s;
}
.smartBoy{
    display: table-cell;
    background:#0F0;
}

<div class="parent">
   <div class="moverBoy">&nbsp;</div>
   <div class="smartBoy">&nbsp;</div>
</div>

In either case, adjusting the width of the parent element or .moverBoy and .smartBoy will cause them to adapt accordingly.

Answer 2

To achieve your desired outcome, you can make use of the float property on .moverBoy and adjust the overflow property of .smartBoy (This method is compatible even with older browsers like IE6):

window.onload = function(){
  document.getElementsByClassName('moverBoy')[0].style.width = '100px';
}

body{ margin:0 }
.moverBoy{
    float: left;
    background:#F00;
    width:300px;
    transition: width 2s;
}
.smartBoy{
    overflow hidden;
    background:#0F0;
}

<div class="parent">
   <div class="moverBoy">&nbsp;</div>
   <div class="smartBoy">&nbsp;</div>
</div>

Alternatively, another approach is to style your elements like a table:

window.onload = function(){
  document.getElementsByClassName('moverBoy')[0].style.width = '100px';
}

body{ margin: 0; }
.parent{
    display:table;
    width: 100%;
}
.moverBoy{
    display: table-cell;
    background:#F00;
    width:300px;
    transition: width 2s;
}
.smartBoy{
    display: table-cell;
    background:#0F0;
}

<div class="parent">
   <div class="moverBoy">&nbsp;</div>
   <div class="smartBoy">&nbsp;</div>
</div>

In either case, adjusting the width of the parent element or .moverBoy and .smartBoy will cause them to adapt accordingly.

Answer 3

Answer №2

To create a responsive layout with changing width on hover, you can utilize CSS3 flex. By hovering over the xBoys in the code snippet below, their width will adjust to 75%, with the other filling the remaining space. Please note that this effect is supported only in modern browsers.

You simply need to set the width for .moverBoy using the flex-basis property. For example, assigning flex: 1 1 75% will change its width to 75% and automatically adjust the size of .smartBoy. The properties include automatic grow and shrink, where 1 indicates true.

Snippet:

.parent {
    width: 100px; height: 20px;
    border: 1px solid gray;
    display: flex;
    flex-direction: columns;
}
.parent > div {
    flex: 1 1 0%;
    transition: all 500ms;
}
.parent > div:hover {
    flex: 1 1 75%;
}
.moverBoy { background-color: #f00; }
.smartBoy { background-color: #00f; }

<div class="parent">
   <div class="moverBoy"></div>
   <div class="smartBoy"></div>
 </div>

Answer 4

To create a responsive layout with changing width on hover, you can utilize CSS3 flex. By hovering over the xBoys in the code snippet below, their width will adjust to 75%, with the other filling the remaining space. Please note that this effect is supported only in modern browsers.

You simply need to set the width for .moverBoy using the flex-basis property. For example, assigning flex: 1 1 75% will change its width to 75% and automatically adjust the size of .smartBoy. The properties include automatic grow and shrink, where 1 indicates true.

Snippet:

.parent {
    width: 100px; height: 20px;
    border: 1px solid gray;
    display: flex;
    flex-direction: columns;
}
.parent > div {
    flex: 1 1 0%;
    transition: all 500ms;
}
.parent > div:hover {
    flex: 1 1 75%;
}
.moverBoy { background-color: #f00; }
.smartBoy { background-color: #00f; }

<div class="parent">
   <div class="moverBoy"></div>
   <div class="smartBoy"></div>
 </div>

Answer 5

Answer №3

Initially, there is a natural whitespace between "mover" and "smart" since they are on separate lines. To avoid this, you can place them on the same line or include comments like this:

<div class="parent">
   <div class="moverBoy"></div><!--
   --><div class="smartBoy"></div>
</div>

As for the css aspect, you have the option to use Calc function:

.moverBoy {
    width:20px;
}
.smartBoy {
    width: calc(100% - 20px);
}

Here is a demonstration of it in action: http://jsfiddle.net/083pnubk/

Answer 6

Initially, there is a natural whitespace between "mover" and "smart" since they are on separate lines. To avoid this, you can place them on the same line or include comments like this:

<div class="parent">
   <div class="moverBoy"></div><!--
   --><div class="smartBoy"></div>
</div>

As for the css aspect, you have the option to use Calc function:

.moverBoy {
    width:20px;
}
.smartBoy {
    width: calc(100% - 20px);
}

Here is a demonstration of it in action: http://jsfiddle.net/083pnubk/

Expanding a div's size with CSS to fill the remaining space

Answer №1

Answer №2

Answer №3

Similar questions

I am interested in discovering the optimal method for loading a vehicle to its maximum capacity by exploring various combinations

Having trouble running Ajax with JavaScript on a Wamp server

CSS:Tips for removing borders with border-radius in CSS

Using various designs on elements generated from ng-repeat

Displaying the second div once the first div has loaded, then concealing the first div

Displaying images in Ionic from a JSON URL source

Angular 5 is throwing an error that says: "There is a TypeError and it cannot read the property 'nativeElement' because it

Utilizing AJAX to load a WAV file

SailsJS - handling blueprint routes prior to configuration of routes

Tips for retrieving return values from AJAX URL content

The fancybox's excess content is concealed

There is a vast expanse separating the header of the page and the navigation bar

Disabling a button following a POST request

Styling with CSS: Utilizing the Float Left Property to Anchor Elements

What is the reason for not allowing return statements in the ternary operator?

Refresh Twitter Bootstrap Tooltip after deactivating/removing

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

Tips for transferring express route handling to the subsequent middleware and bypassing the current block of code

Struggling to make PayPal Cordova Plugin function properly in both production and sandbox modes

Display a webpage once its design is completely loaded in Nuxt