Placing Two Div Elements Side by Side with CSS

In web development, it’s common to need two or more elements placed next to each other horizontally. One scenario involves placing two div elements side by side where one div takes up a specific width (e.g., 200px) and the other fills up the remaining space. This tutorial will explore how to achieve this layout using CSS.

Understanding the Requirement

Before diving into solutions, let’s outline our goal:

• We have two div elements.
• One div must be exactly 200px wide.
• The other div should fill the rest of the screen width (or its parent container).
• Both divs need to be positioned next to each other horizontally.

Solution Using Flexbox

Flexbox is a modern CSS layout model that allows you to design complex layouts with less code and more flexibility. It’s ideal for our scenario because it can easily handle dynamic widths and flexible spacing between elements.

Here’s how you can use flexbox:

#parent {
  display: flex;
}

#narrow {
  width: 200px; /* Fixed width */
  background-color: lightblue; /* For visibility */
}

#wide {
  flex: 1; /* Takes the remaining space */
  background-color: lightgreen; /* For visibility */
}

And the corresponding HTML:

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

In this example, #parent is set to display: flex;, which makes its direct children (#wide and #narrow) flex items. The #narrow div has a fixed width of 200px, while the #wide div uses flex: 1; to expand and fill any remaining space in the container.

Solution Using Floats

For scenarios where you need to support older browsers that don’t handle flexbox well, or if you prefer a more traditional approach, you can use CSS floats.

#narrow {
  float: right;
  width: 200px;
  background-color: lightblue;
}

#wide {
  float: left;
  width: calc(100% - 200px);
  background-color: lightgreen;
}

And the HTML remains the same as in the flexbox example.

In this method, #narrow is floated to the right and given a fixed width. The #wide div is floated to the left and its width is calculated using calc(100% - 200px) to ensure it fills the space not occupied by #narrow.

Solution Using Inline-Block

Another method involves setting both divs to display: inline-block;. However, this approach requires careful handling of whitespace between elements in your HTML if you’re placing them on separate lines.

.inline-block-div {
  display: inline-block;
}

#narrow {
  width: 200px;
  background-color: lightblue;
}

#wide {
  width: calc(100% - 200px);
  background-color: lightgreen;
}

And the HTML:

<div>
  <div id="wide" class="inline-block-div">Wide (rest of width)</div>
  <div id="narrow" class="inline-block-div">Narrow (200px)</div>
</div>

Note that using display: inline-block; might require additional styling to remove gaps between elements, such as setting the parent’s font-size: 0; and then resetting it for the children.

Conclusion

Each of these methods has its own use cases depending on your project’s requirements, browser support needs, and personal preference. Flexbox offers a powerful and flexible (no pun intended) way to achieve complex layouts with ease, making it a popular choice for modern web development. Floats provide a legacy-friendly approach that’s still useful in certain situations. Understanding how to use these different techniques will enhance your CSS skills and make you more versatile in tackling various layout challenges.