dynamic and fixed size in CSS

Question

I need in the same HTML row to have 2 divs: one will stay the same width while the other's size will be increased once the web page is being increased by the end user.

So I defined one div and inside 2 divs like this:

<div>
    <div style="float:left" width="20px">first div</div>
    <div style="float:left" width="100%">first div</div>
</div>

However it does not work!

How can I create 2 divs in the same line that one will be fixed size and the other one relative?

Answer 1

Do I win?

Live Demo

Live Demo #2 (using classes and with support for more than one instance of this)

HTML:

<div id="divHolder">
    <div id="div1">1</div>
    <div id="div2">2</div>
</div>

CSS:

#divHolder {
    overflow: auto
}
#div1 {
    float: left;
    width: 20px;
    background: #ccc
}
#div2 {
    margin-left: 20px;
    background: #888
}

Answer 2

Take a look at this: http://jsfiddle.net/Shaz/GaZYt/2/

The left box will change size depending how much horizontal space is left. The right box will always have a minimum and maximum width of 200px.

Answer 3

Try setting display:inline on the div elements. The default display value for a div is block (which causes them to appear on seperate lines). Here is an example on js fiddle

Answer 4

I believe you may need to use Javascript to handle this case.

$(window).resize(function() {
  var $left = $('#left');
  var $container = $('#container');
  $right.width($container - $left);
});