CSS - два деления бок о бок, один занимает столько места, сколько нужно, другой занимает всю ширину

Question

Я пытаюсь заставить двух Div сидеть рядом. Я хочу, чтобы один div занимал столько ширины, сколько необходимо, а другой - оставшуюся ширину, чтобы оба div-диапазона занимали 100% ширины. Это возможно? Я пробовал плавать и кучу разных настроек позиционирования, но я не могу найти решение, которое работает. Я естественно думал, что добавление элемента float: left к левому элементу будет работать, однако, когда вы попытаетесь добавить padding / margin / border к правому элементу, браузер не будет применять его. Вот некоторый код, который я расширил (из существующего ответа), чтобы проиллюстрировать проблему.

<style>
    #foo {
        float: left;
        background: red;
        height: 100%;
        padding: 5px;
    }
    #bar {
        background: green;
        border: solid 1px blue;
        padding: 5px;
        height: 100%;
    }
</style>   
<div>
    <div id="foo">foo</div>
    <div id="bar">bar</div>
</div>

Если вы откроете этот код в браузере, вы заметите, что панель div не дополняется, и к ней не применяется граница ... Я понятия не имею, почему.

Спасибо за любую помощь.

Answer 1

Это работает:

<style>
    #foo {
        float: left;
        background: red;
    }
    #bar {
        background: green;
    }
</style>   
<div>
    <div id="foo">foo</div>
    <div id="bar">bar</div>
</div>

http://pastehtml.com/view/19ldeqq.html

Answer 2

Этот использует javascript, но я нашел единственный способ сделать это.

<script type="text/javascript">
        window.onload = shouldNotBeThisHard;
        window.onresize = shouldNotBeThisHard;
        function shouldNotBeThisHard() {
            var j = document.getElementById('divThatYouWantAllOf');
            var k = document.getElementById('divForRestOfScreen');
            var jh = 0;
            if (j)
                jh = j.clientWidth;
            var h = (window.innerWidth - (jh + 30));
            k.style.width= h + "px";
        }
</script>

с HTML-кодом, похожим на это:

<div id="divForRestOfScreen" style="float:left;overflow:auto;">
    asdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
    dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    </div>
    <div id="divThatYouWantAllOf" style="float:right" >
    This is why I hate web programming.
    </div>

Answer 3

почему бы не использовать таблицу, установить ширину всей таблицы равной 100%, а затем каждую строку без ширины, например:

<table width="100%" border="0"> <tr> <td><div>DIV INFO LEFT</div></td> <td><div>DIV INFO RIGHT</div></td> </tr> </table>