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

This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.

.container { 
  display: flex; 
}

.left {
  width: 100px; /* or leave it undefined */
}

.right { 
  flex-grow: 1;
}

/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}

<div class="container">

  <div class="left">100px</div>
  <div class="right">Rest</div>
  
</div>

Answer 2

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:

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

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.

Answer 3

So even though I wanted to do this with CSS only, I ended up just using tables...

Answer 4

you need to provide position:absolute style property to both your div's

Answer 5

I haven't really seen a good solution in the answers here. So I'll share mine.

Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.

Example:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}

Answer 6

Use floating:

#container{
width:100%
}

#inner_left{
float:left;
max-width:200px;
}

#inner_right{
float:left;
width:100%; 
}

Edit: have a read a this, it's a nice little guide : quirksmode