2 divs aligned side by side, how to make right div fill width 100%?

Question

I\'m wondering what the best way to go about doing this is...

I have 3 divs:

• a div#container with width=100%; tha

Answer 1

Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).

Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/

Here's the HTML part:

    

        Left Box
    

    

        Right Box
    

And the corresponding SCSS:

.wrapper {
    position: relative;
}

$left_width: 200px;
.left {
    position: absolute;
    left: 0px;
    width: $left_width;
}
.right {
    margin-left: $left_width;
}

If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).

Credit: This is based on http://htmldog.com/examples/pagelayout2/. There are several other useful ones there.