Two Divs, One Fixed Width, the Other, the Rest

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

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

Two divs - one fixed height, the other to fill the remaining space

define child2's height and width as follows:

height: calc(100% - 15px);
width: calc(100% - 5px);

.container {  width: 100%;  height: 100px;  background: blue;  position: relative;}
.child1 {  position: absolute;  top: 0;  height: 15px;  width: 100%;  background: red;}
.child2 {  position: absolute;  top: 15px;  height: calc(100% - 15px);  width: calc(100% - 5px);  margin-left: 5px;  background: green;}

<div class="container">  <div class="child1"></div>  <div class="child2"></div></div>

How to make divs side-by-side with one fixed width and one the rest of the screen

This is achievable using CSS alone with the calc function, see this fiddle for example: https://jsfiddle.net/jks421gy/1/

width: calc(100% - 200px);

You need to float the divs, then give the first one the fixed width, then the right one will be 100% of the space minus 200px.

Two divs: one fixed, other stretched

Wouldn't this work as intended?

#floatitleft{
    width:300px;
    float:left;
}
#floatitright{
    margin-left: 300px;
}

One fixed width div and two variable

S.B. provided a great answer, but here's an alternative method just for fun. You could have everything display:block; like normal, then float:left;, and use calc() to get the width of the final column. It would just be 100% - 55% - 200px, or compressed, 45% - 200px.

Benefit to this is that you don't need to have the #container. Potential issue is browser support, mostly mobile browsers. See: http://caniuse.com/calc

HTML:

<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>

CSS:

#container {
    width: 100%;
}
#left {
    float:left;
    width:200px;
    height:100px;
    background-color:#A00;
    opacity:0.3;
}
#middle {
    float:left;
    width:55%;
    height:100px;
    background-color:#0A0;
    opacity:0.3;
}
#right {
    float:left;
    background-color:#CCC;
    height:100px;
    width:calc(45% - 200px);
}

Demo: http://jsfiddle.net/eMbV7/9/

Two divs side by side: first fixed-width, second stretch-to-fit

I think that should do it :

#d1 {
  display: table;
  width: 100%;
}

#d2, #d3 {
  display: table-cell;
  padding: 2px 6px;
}

#d2 {
  white-space: nowrap;
}

#d3 {
  width: 100%;
}

You can try it here

Two divs (left, right) in parent, right with fixed width, left fill free space, both in same line. (without position relative/absolute)

You could do it like this:

JSFiddle - DEMO

CSS:

.container {
    width: 500px;
    background-color: bisque;
    height: 50px;
    display: table;
}
.container .left {
    background-color: burlywood;
    height: 50px;
    display: table-cell;
    width: 100%;
}
.container .right {
    background-color: chartreuse;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: text-top;
}

Two Divs, One Fixed Width, the Other, the Rest