How to Make a Div Fill Remaining Width in a Parent Container?

Achieving Dynamic Width Distribution: Filling Remaining Div Width

When working with multiple divs within a parent div, the task of ensuring that one div fills up the remaining width can arise. This technique can be particularly useful in creating responsive layouts that accommodate varying content sizes.

In your provided HTML code, you have a parent div (#Main) with two divs (#div1 and #div3) of fixed widths and a third div (#div2) that you want to fill up the remaining space. To accomplish this, you can employ several methods:

Floating Divs:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; }
    #middle-div { float: left; width: calc(100% - 200px); }
    #right-div { width: 100px; float: right; }
</style>

Flexbox Layout:

<style>
    #divMain { 
        display: flex;
        width: 500px; 
    }
    #left-div { width: 100px; }
    #middle-div { flex-grow: 1; }
    #right-div { width: 100px; }
</style>

Grid Layout:

<style>
    #divMain { 
        display: grid;
        grid-template-columns: 100px auto 100px; 
    }
</style>

The above is the detailed content of How to Make a Div Fill Remaining Width in a Parent Container?. For more information, please follow other related articles on the PHP Chinese website!