Free tools Windows power users keep installed
One-click scans. No signup required.
To make the left column fill the space beside a fixed-width right column, give the left track the remaining space rather than 100% of the parent. In CSS Grid, use grid-template-columns: minmax(0, 1fr) 20rem as a starting example, then choose a sidebar width and responsive breakpoint that fit your content. If “fixed” means the sidebar should stay in place while scrolling, that requires a different positioning rule.
Use Grid for a fixed-width sidebar and a fluid main column
A two-column layout with a fixed-width right track and a flexible left track can be made with CSS Grid:
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 20rem;
gap: 1rem;
}
@media (max-width: 48rem) {
.layout {
grid-template-columns: 1fr;
}
}The values 20rem and 48rem are example design choices, not universal recommendations. Set them to suit the sidebar content and the width at which your actual layout stops working.
The second grid track is the fixed-length sidebar. The 1fr first track takes the available space left over after the sidebar and the gap. The minmax(0, 1fr) form gives that flexible track a zero minimum, so long or unbreakable content is less likely to force the column wider than the available space. See MDN’s grid-template-columns reference and Grid layout basics.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why not set the left column to 100%?
If the left track occupies 100% of the parent and the right track also has a nonzero width, the two tracks and their gap exceed the parent’s width. The result can overflow. For this layout, “fills the available width” is the useful interpretation: let the left track take the remainder instead. MDN explains fixed and fractional tracks in its guide to common Grid layouts.
Make the layout work on narrow screens
Two columns that fit on a desktop may become cramped on a phone. The example changes the grid to one column at 48rem, but that breakpoint is illustrative; choose it based on the minimum usable width of both areas. You can also change which content appears first by placing the main content and sidebar deliberately in the markup or with Grid placement rules.
Responsive layouts commonly use media queries to alter the grid as space changes. MDN’s responsive design guide describes this approach. Check the result with realistic text, narrow viewports, and browser zoom; especially look for sidebar content or long words that push the layout wider than the screen.
When Flexbox is a suitable alternative
For two items in a single horizontal row, Flexbox can also let the main area grow while the sidebar keeps a fixed size:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.layout {
display: flex;
gap: 1rem;
}
.main {
flex: 1;
}
.sidebar {
flex: 0 0 20rem;
}Here, 20rem is again an example. Add a media query to stack the items or otherwise adjust them when the available width is too small. Grid is a natural choice when you want to define explicit columns; Flexbox suits a straightforward one-dimensional row. MDN explains Flexbox’s space distribution and responsive changes in its Flexbox basics.
Fixed width is not fixed positioning
A fixed-width sidebar stays in the normal document flow; it does not necessarily stay visible while the page scrolls. If you mean that the sidebar should remain attached to the viewport during scrolling, that is a separate positioning behavior. Do not add viewport positioning just to set the sidebar’s width. The term “fixed” can mean either thing, so decide which behavior you need before choosing CSS.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
