Help with Div - Make Div Fit the Remaining Width

Make a div fill up the remaining width

Try out something like this:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

Note that the "middle div" goes after the "right div" in the HTML

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

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>

How to make div width only to fit its content and the next div to fill the remainder?

you should put

The float causes the element to occupy only its content

The overflow: hidden; causes the next content to occupy the remaining space

.InputDivTitle{
  float: left;
}
.InputDiv{
  position: relative;
  overflow: hidden;
}

see JSFiddle

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

Make div occupy remaining width of parent

First of all, try avoiding float, it's quite messy.
In order to achieve the 'two items on one line' trick, you need to know to set the width of your button, and tell the input to take the remaining space with the calc() CSS attribute.

input {
display: inline-block;
width: calc(100% - 100px);
}

button {
width: 100px;
margin: 0;
display: inline-block
}

div {
width: 100%;
}

Check out this flexbox guide as well, it's very informative on how to place objects!

Good luck!

Make div occupy 100% of the remaining width?

You could use flex:

#container {  display: flex;  width: 100%;}
#menu {  width: 200px;  background: red;}
#content {  flex: 1;  background: yellow;}

<div id="container">
  <div id="menu">    foo  </div>
  <div id="content">    foo  </div>
</div>

How to make a div fill remaining space?

Here is a solution which defines header, footer and #contentParent as position: fixed and gives #contentParent 100% height minus the height of header and footer (= 80px in this example - this depends on your own settings).

Any additional content has to be added inside #contentParent - this element will then scroll since it has overflow-y:auto;. The header and footer will always remain on the screen due to their absolute position and won't cover any part of the content since #contentParent has according margins at top and bottom which equal the height of the header and footer.

The background image will cover #contentParent completely and won't scroll diue to background-attachment: fixed (integrated in the shortcut background property)

html,body,#main {  height: 100%;  margin: 0px;}
.floatClear {  clear: both;}
.headerGraphics {  display: inline;}
#header {  position: fixed;  top: 0;  width: 100%;  height: 40px;  background: #023489;  text-align: center;}
#logoCompany {  display: inline;}
#contentParent {  position: fixed;  height: calc(100% - 80px);  width: 100%;  overflow-Y: auto;  margin: 40px 0;  background: url(http://placehold.it/1500x800/fc7) center center no-repeat;  background-position: fixed;  background-size: cover;}
#leftPane {  background: yellow;  float: left;  margin: 100px 0 0 10%;  opacity: .5;  width: 40%;}
#rightPane {  background: green;  float: right;  margin: 100px 10% 0 0;  opacity: .5;  width: 40%;}
#footer {  position: fixed;  bottom: 0;  width: 100%;  height: 40px;  width: 100%;  background: lightblue;}

<body>  <div id='main'>    <div id='header'>      <div id='logoCompany'>        <img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>      </div>    </div>    <div id='contentParent' class='floatClear'>      <div id='content' style="text-align: center;">        <div id='leftPane'>          Left Col        </div>        <div id='rightPane'>          Right Col        </div>      </div>    </div>    <div id='footer'>      Footer    </div>  </div></body>

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?