How to Make a Div Dynamically Fill Remaining Space in a Web Page Layout?

Maintaining Flexural Equilibrium: Dividing Remaining Width Allocation

In the realm of web development, achieving optimal page layouts often involves aligning elements seamlessly. One such challenge arises when striving to make a div dynamically fill the remaining space within a container. To effectively tackle this task, consider the following example:

<div>
<p>Within this layout, our aim is to adapt div2 to occupy the remaining width available. To achieve this, leverage the following code:</p>
<pre class="brush:php;toolbar:false"><style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div><p>By assigning appropriate width, float, and margin values to the child divs, div2 dynamically adapts to occupy the remaining space seamlessly. Note that the "middle div" should be positioned after the "right div" in the HTML markup for proper rendering.</p></div>