Two divs, one fixed width, the other, the rest

html

responsive-design

css

layout

byAnton Shumikhin·Jan 15, 2025

Craft a responsive layout using a flex container. The first div sports a fixed width and the second div claims the remaining space. Apply display: flex; to the container, flex: 0 0 200px; (coding lingo for "stay put at 200px!") to the fixed div, and flex-grow: 1; to the flexible div.

<div style="display: flex;">
  <div style="flex: 0 0 200px; background: #add8e6;">Fixed</div> <!-- As fixed as grandma's secret recipe! -->
  <div style="flex-grow: 1; background: #f08080;">Rest</div> <!-- I'm flexible. Like a cat... or a yoga instructor. -->
</div>

The Fixed div remains stable, the Rest div adjusts based on the available space.

Flexing with flexbox

The flexbox model is a powerful tool for creating flexible, responsive layouts. Unlike traditional methods with floats or absolute positioning, flexbox offers a neater and more maintainable solution.

Fallbacks and alternative techniques

Flexbox is fantastic but there are other ways to achieve a similar layout. These might come in handy especially while supporting older browsers or due to specific project constraints.

Display: table approach

This method converts divs into table cells - one cell can have a fixed width while the other occupies remaining space. Older browsers approve!

All about floating

float: left; and float: right; can be used, but remember to clear the floats using overflow: hidden; on the container or apply a clearfix. It's less flexible but works well for basic layouts.

The absolute positioning option

With left: 0; and right: 250px;, you can achieve this layout. Beware of overlap and maintaining flow, absolute positioning is a gift that needs care.

Addressing browser quirks

Remember, always check in cross-browser testing and caniuse.com. Be cautious of older browsers like IE6 where absolute positioning can become a game of digital hide and seek.

Employing calc() for precision

When you require a level of control beyond flexbox or table layouts, CSS calc() function is your Swiss army knife. This function allows you to calculate dimensions dynamically, critical for responsive designs.

.fixed-div {
  width: 200px; /* Yep, you're stuck with me at 200px */
}

.flexible-div {
  width: calc(100% - 210px); /* Made space for me and my skateboard! */
}

Add margin-left: 10px; to introduce a gap between the divs. Peaceful coexistence, no touching!

Addressing pesky edge cases

When potential issues may pop up (and they will), use min-height on the first div to make sure it doesn't collapse when content is minimal. And for navigational elements, wise positioning of divs in your source code can help tame CSS.

A modular and clean HTML structure

A simple, clean HTML structure not only streamlines styling but leads to better accessibility and improved SEO standings. Those nested divs? They make your layout complicated and hinder maintainability.