How Can I Position Two Divs Side-by-Side with One Div Having a Fixed Width and the Other Expanding to Fill the Remaining Space?

Placing Two Divs Side-by-Side in CSS

When working with HTML and CSS, the need to position elements next to each other is common. This article delves into a specific scenario, where the goal is to create two horizontally adjacent divs, with one div constrained to a specific width while the other occupies the remaining available space.

Flexbox Solution

Modern browsers support a CSS property called flexbox, which provides a powerful method for laying out elements in a flexible manner. To achieve the desired layout, consider using flexbox. Here's a code snippet that demonstrates this approach:

<div>

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

In this example:

• #parent is the containing div that sets the flexbox layout.
• #narrow has a fixed width of 200px.
• #wide is set to grow and occupy the remaining available space on the screen, due to the flex: 1 property.

By utilizing flexbox, you can easily create side-by-side divs without the need for complex width calculations or additional CSS rules. This solution is both concise and flexible, making it suitable for a range of scenarios.

The above is the detailed content of How Can I Position Two Divs Side-by-Side with One Div Having a Fixed Width and the Other Expanding to Fill the Remaining Space?. For more information, please follow other related articles on the PHP Chinese website!