float div next to 100% width div

Question

I would like to position a div next to a div with contents of width: 100% . So the markup is:

<div id="left_sidebar" style="float: left; height: 100%; width: 150px;"></div>
<div id="outer_wrapper" style="position: relative; float: left;"></div>

pretty much everything in #outer_wrapper has a width of 100%. Unfortunatly it does not work.

I made a FIDDLE

Answer 1

How about :

 #left { width: 150px; height: 1000px; background-color: green; float: left; } #right { width: 100%; height: 1000px; background-color: red; float: left; } 

 <div id="right"> content here <div id="left"></div> more content here </div> 

SECOND OPTION :

remove the width and the float property of the .right div and give it 150px left margin :

 #left { width: 150px; height: 1000px; background-color: green; float: left; } #right { height: 1000px; background-color: red; margin-left:150px; } 

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

Answer 2

http://jsfiddle.net/hasecbinusr/cm9qxbt8/2/

$(document).ready( function() {
   var rightWidth = $(window).width - $('#left').width();
   $('#right').width(rightWidth);
});

Answer 3

How about this?

<div style="padding-left:150px; position:relative;width:100%;">
    <div id="outer_wrapper" style="position: relative; width:100%">this is 100%</div>
    <div id="left_sidebar" style="position:absolute;left:0px;top:0px;width:150px;">this is 150 pixels wide</div>
</div>

The idea is to have the outer-most div a left padding of 150px so that the first child div will be rendered 150px away from the border. Then add another div that will become the left container by using an absolute position and force it to be rendered as if it is the first.