Two Divs; Left Should Be Fixed Width, Right Should Fill Rest of Space

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

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?

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.

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

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

<div id="left">
    Menu
</div>
<div style="text-align: center;">
<div id="right">
    Content
</div>
</div>

#left {
    background-color: green; /*for demonstration purposes*/
    float:left;
}

#right{
    background-color: blue;
    width: 800px;
}

$(document).ready(function(){
    var width = $(document).width();
    var rightDivWidth = $("#right").width();
    var leftDivWidth = width - rightDivWidth;
    $("#left").css("width", leftDivWidth);
});

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

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

#d2 {
  white-space: nowrap;
}

#d3 {
  width: 100%;
}

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

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

.header {  float: left;  background: #efefef;  background-repeat: no-repeat;  width: 240px;  height: 100px;}
.header-right {  overflow: hidden;   background-color: #000;  height: 100px;}

<div class="header"></div><div class="header-right"></div>