How to Divide the Screen Width Between Two Elements with Fixed and Flexible Widths?

Dividing the Screen's Width Between Two Elements

In web design, you may encounter the need to divide the screen's width between two divs, with one having a fixed width and the other occupying the remaining space. Here's how you can achieve this:

Using Float with Percentage-Based Width:

This approach uses CSS float property to position the divs side-by-side.

.left {
    float: left;
    width: 83%;
}

.right {
    float: right;
    width: 17%;
}

Note that the widths add up to 100% to ensure that the divs fill the entire width of the parent container.

Using Flexbox:

Flexbox is a more versatile layout system that allows you to control the size and position of elements using flexible dimensions.

.container {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    width: 250px;
}

In this example, the ".container" div is set to display as a flexbox, and the ".left" div is given a flex grow factor of 1, which allows it to expand to fill the remaining space after the fixed-width ".right" div.

Using Display Table:

You can also use display: table to create a two-column layout where the first column has a fixed width and the second column takes up the remaining space.

.left {
    display: table-cell;
    width: 250px;
}

.right {
    display: table-cell;
}

The above is the detailed content of How to Divide the Screen Width Between Two Elements with Fixed and Flexible Widths?. For more information, please follow other related articles on the PHP Chinese website!