Let Span Fill Remaining Width

Let span fill remaining width?

You don't want to float each of them left, only the first one, and then make the second one display in block mode:

<li>
  <span style="float:left; background-color:red">a</span>
  <span style="display: block; background-color:green">b</span>
</li>

Getting an input to fill remaining width like a span element

This should do the trick for you:

css

.a {
    display:table-cell; background-color:red;
}
.b {
    display:table-cell; background-color:green; width:100%;
}
.c { width:100%; }

html

<div>
  <span class="a">something</span>
  <span class="b">fill the rest</span> 
</div>
<div>
  <span class="a">something</span>
  <span class="b"><input class="c" value="fill the rest" /></span>
</div>

jsfiddle : http://jsfiddle.net/FKZUA/55/

How can I have a div/span fill in the remaining width/height of the page, and stay fixed in position?

My Solution would be to use 2 wrapper divs:

body-wrapper: contains header and content-wrapper
content-wrapper: contains navbar and content

The wrapper have paddings and are set to 100% width, 100% height AND box-sizing:border-box;, that´s very important. Normally you would get 100% + the padding. With box-sizing:border-box; the element will remain to 100%.

body,html {    height: 100%;}
body {    background-color: #eee;    margin: 0;}
#body-wrapper {    position: relative;    height: 100%;    padding-top: 50px;    background-color: orange}
#header {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 50px;    padding: 15px 0 0 120px;    background-color: #bababa;}
img {    position: absolute;    top: 0;    left: 0;}
#content-wrapper {    position: relative;    height: 100%;    width: 100%;    padding-left: 100px;}
#navbar {    position: absolute;    display: block;    top: 0;    left: 0;    width: 100px;    height: 100%;    padding: 10px;    color: #fff;    background-color: #333}
#content {    position: relative;    width: 100%;    height: 100%;    padding: 1px 20px;    overflow-y: auto;}
.border-box {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}

<div id="body-wrapper" class="border-box">    <div id="header" class="border-box">        <img src="http://placehold.it/100x50">AnimeDB    </div>    <div id="content-wrapper" class="border-box">        <div id="navbar" class="border-box">navbar</div>        <div id="content" class="border-box">            <p>                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.            </p>            <p>                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.            </p>            <p>                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.            </p>            <p>                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.            </p>        </div>    </div></div>

CSS - Make SPAN extend to end of its container / fill empty space?

I think I found a pure CSS solution. You only missed two things:

You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.

This way you don't need to specify a width for anything. :)

JSFiddle demo

http://jsfiddle.net/yz9TK/

CSS

(I cleaned it up a little bit)

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
    background: #212121;
    color: #FFF;
}

#ctl00_breadcrumb {
    height: 45px;
    width: 960px;
    background-color: #707070;
    line-height: 45px;
    font-size: 16px;
    font-family: Helvetica, sans-serif;
    border-radius: 10px;
    border: 1px solid #585858;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .75);
    box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .75);
    white-space: nowrap;
    overflow: hidden;
}

#ctl00_breadcrumbContent span {
    display: inline-block;
    padding: 0px 10px;
    line-height: 45px;
    font-size: 18px;
    font-family: Helvetica, sans-serif;
}

#ctl00_breadcrumbContent span a { 
    padding: 0;
    margin: 0;
    color: #FFF;
    text-decoration: none;
    line-height: 45px;
    font-size: 18px;
    font-family: Helvetica, sans-serif;
}

#ctl00_breadcrumbContent span:nth-child(even) {
    width: 0;
    height: 0;
    padding: 0;
    margin: -22px -4px -16px -4px;
    overflow: hidden;
}

#ctl00_breadcrumbContent span:nth-child(1) { 
    border-radius: 10px 0px 0px 10px;
    background-color: #404040;
}

#ctl00_breadcrumbContent span:nth-child(2) {
    border-top: 22px solid #505050;
    border-bottom: 23px solid #505050;
    border-left: 15px solid #404040;
}

#ctl00_breadcrumbContent span:nth-child(3) {
    background-color: #505050;
}

#ctl00_breadcrumbContent span:nth-child(4) { 
    border-top: 22px solid #606060;
    border-bottom: 23px solid #606060;
    border-left: 15px solid #505050;
}

#ctl00_breadcrumbContent span:nth-child(5) {
    background-color: #606060;
}

#ctl00_breadcrumbContent span:nth-child(6) { 
    border-top: 22px solid #707070;
    border-bottom: 23px solid #707070;
    border-left: 15px solid #606060;
}

#ctl00_breadcrumbContent span:nth-child(7) { 
    background-color: #707070;
}

#ctl00_breadcrumbContent span:nth-last-child(1) {
    background-color: #707070;
}

#ctl00_breadcrumbContent span:nth-last-child(2) {
    border-top: 22px solid #707070;
    border-bottom: 23px solid #707070;
}

Getting a span element fill the space in a div

If you reorder your HTML, you can get a simple solution:

<div class="container">
  <span class="left">Title</span>
  <span class="right">value</span>
  <span class="center"> </span>
</div>

Place the two floated elements ahead of the .center element. The .center element will be in regular content flow and wrap around the left and right content.

The CSS:

.center {
    display: block;
    border-bottom: 1px dotted blue;
    overflow: auto;
    position: relative;
    top: -4px;
}

.right {
    float: right;
    margin-left: 10px;
}

.left {
    float: left;
    margin-right: 10px;
}

.container {
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}

When you float an element, the display type computes to block, so no need to declare it.

Also, for .center, if you add overflow: auto, you constrain the block so it does not extend beyond the edges of the floated elements. As a result, your bottom border does not underline the title and value text.

Finally, you can add position: relative and move the .center up a few pixels to align the border closer to the baseline of the text.

Fiddle: http://jsfiddle.net/audetwebdesign/DPFYD/

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?

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 fill 100% of remaining width

Updated answer:

The answers here are pretty old. Today, this can be achieved easily with flexbox:

.container {  border: 4px solid red;  display: flex;}.content {  border: 4px solid green;  flex-grow: 1;  margin: 5px;}.sidebar {  border: 4px solid blue;  margin: 5px 5px 5px 0;  width: 200px;}

<div class="container">  <div class="content">    Lorem ipsum dolor sit amet.  </div>  <div class="sidebar">    Lorem ipsum.  </div></div>

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

Let Span Fill Remaining Width