Bootstrap: sensitive division between two divided div elements

advertisements

I have a responsive <div> element placed in between two fixed <div> elements. I've tried the following code:

 <html>
 <head>
 <title>Sample1</title>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
     <div style="width: auto">
         <div style="float: left; width:270px; background-color: green">Fixed div</div>
         <div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
         <div style="background-color: red" class="row">Responsive div</div>
     </div>
</body>
</html>

Currently the responsive <div> element is taking the whole screen. When I try to checkout the width and height, it has acquired my entire main <div>. Is there any approach where I can put this responsive <div> inside 2 fixed <div>?


Check below code: Here I have altered Div sequence and change display style of the three.

<html>
 <head>
   <title>Sample1</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
  <div style="display:table; width:100%">
    <div style="display:table-cell; width:270px; background-color: green">Fixed div </div>
    <div style="background-color: red; display:table-cell;"> Responsive div </div>
    <div style="display:table-cell; width: 120px; background-color: yellow"> Fixed div</div>
  </div>
</body>
</html>