Question

I want to put two <div>s next to each other. The right <div> is about 200px; and the left <div> must fill up the rest of the screen width? How can I do this?

Answer 1

You can use flexbox to lay out your items:

#parent {   display: flex; } #narrow {   width: 200px;   background: lightblue;   /* Just so it's visible */ } #wide {   flex: 1;   /* Grow to rest of container */   background: lightgreen;   /* Just so it's visible */ }

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

This is basically just scraping the surface of flexbox. Flexbox can do pretty amazing things.

---

For older browser support, you can use CSS float and a width properties to solve it.

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

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