How Can I Position Two Divs Side-by-Side Using CSS?

Placing Two Divs Side-by-Side in CSS

Creating two adjacent divs can be a common layout requirement. To achieve this, consider the following approach:

Flexbox:

In this solution, flexbox is employed to arrange the divs horizontally:

<h1>parent {</h1><p>display: flex;<br>}</p><h1>narrow {</h1><p>width: 200px;<br>  background: lightblue; /<em> Just so it's visible </em>/<br>}</p><h1>wide {</h1><p>flex: 1; /<em> Grow to rest of container </em>/<br>  background: lightgreen; /<em> Just so it's visible </em>/<br>}<br>

<div>  <div id="wide">Wide (rest of width)</div><br>  <div></div><br>

This approach allows you to specify a fixed width for the left div (#narrow) while the right div (#wide) automatically occupies the remaining space, filling the screen width.

The above is the detailed content of How Can I Position Two Divs Side-by-Side Using CSS?. For more information, please follow other related articles on the PHP Chinese website!