Positioning two divs, one with fixed width(left di

问题:

As the title says, i wanted to place two divs horizontally in a single line. The left side div is of fixed width(which contains an image) while the right side div should occupy the rest of the space.

CSS:

.container{
  width:100%;
  background-color:#000000;
  height:auto;
}

.inner_left{
  width:150px;
  float:left;
  height:250px;
  background-color:#FF0000;
}

.inner_right{
  float:left;
  height:250px;
  width:78%;
}

HTML :

  <div class="container">
    <div class="inner_left">test</div>
    <div class="inner_right">Nam a congue risus. Mauris mattis facilisis nisi, eget convallis enim lobortis a. Curabitur non neque nec augue commodo ullamcorper sit amet et lorem! Proin tristique vitae lacus ut consectetur. In at convallis dolor, in laoreet dolor. Etiam in molestie enim! Nunc tincidunt pharetra magna, et sollicitudin enim sodales sed. Morbi pretium sollicitudin lorem, bibendum molestie libero consectetur eu. Nunc aliquet eros purus, vel ultricies sem volutpat quis. Fusce nisi ligula; venenatis tristique turpis sit amet, semper adipiscing ante. Aliquam in justo fermentum, interdum nulla vestibulum, ornare augue.

      </div>    
  </div>

What i have tried :

http://jsbin.com/arIPIHe/2/

http://jsbin.com/arIPIHe/3/

The second link works correctly as long as i don't alter the browser resolution. As soon as i reduce the browser width, the right side div goes to next line under the left div.

I have created the jsbin demo with the elements that i have in the work. I made the bin since the main one is quite large and contains lot of elements inside it.

Ive searched around in Google as well as stack and got the following links, but i tried the same and it doesn't help me as such.

1. How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?

2. Two divs, one fixed width, the other, the rest

How can i position the right side div so that it will always remain next to the left div and also occupy the width remaining. I cannot get my head around this.

回答1:

CodePen Demo

Use CSS position

CSS

*{
  margin:0;
  padding:0;  
}

.wrapper{
    margin-top:10px;

    position :relative;
    width: 100%;
    margin: 0px auto;
    height:250px;
}
.inner_left {
  position : absolute;
  top:0;
  left:0;
  bottom:0;
  background: orange;
  width: 250px;


}
.inner_right{
  position :absolute;
  top:0;
  right:0;
  bottom:0;
  left:250px;  
  background:blue; 
}

It is a same issu of this answer : Two divs side by side, one with google map and second with fixed width