How Can I Achieve Side-by-Side Divs with One Fixed Width and the Other Filling Remaining Space Using CSS?

Achieving Side-by-Side Divs in CSS

When trying to arrange multiple divs horizontally, the challenge of aligning them seamlessly can arise. This article provides a solution by utilizing CSS flexbox to achieve an optimal layout that maximizes page utilization.

Problem:

The objective is to position two divs side by side, with one div maintaining a fixed width of 200px, while the other div dynamically fills the remaining screen space.

Solution:

The key to this layout is flexbox, a powerful CSS property that allows for flexible item arrangement. Here's how to implement it:

1. Create a parent div and set its display property to flex:

   #parent {
     display: flex;
   }

   Copy after login

2. Define the fixed-width div and specify its width:

   #narrow {
     width: 200px;
     background: lightblue; /* Just for visibility */
   }

   Copy after login

3. Add flex: 1 to the other div:

   #wide {
     flex: 1; /* Grows to fill remaining space */
     background: lightgreen; /* Just for visibility */
   }

   Copy after login

By utilizing flexbox, you can create a dynamic and flexible layout where the divs are positioned side by side, optimizing the available screen space.

The above is the detailed content of How Can I Achieve Side-by-Side Divs with One Fixed Width and the Other Filling Remaining Space Using CSS?. For more information, please follow other related articles on the PHP Chinese website!