Fluid div next to fixed div

Question

I have the Bootstrap framework for basis of the website. Now, the main content is let's say is 1000px wide. Then I have this 100% wide area, inside of which I have centered 1000px area. But...

1. The left section is fixed width of 290px.
2. The right long section is fluid width and starts right from the border of the left section and it ends where the 100% wide container ends.
3. Inside of the right long section is 710px fixed content.

I want to have fluid width right content. Image slider or google map or something.

I think the basic html should be:

<div class="wide_container">
 <div class="container1000px">
  <div class="left290px">
  </div>
  <div class="rightFluid">
   <div class="right710px">
     But inside of this the image slider should be wider than 710px.
     And this website is responsive, too.
   </div>
  </div>
 </div>
</div>

Thanks a lot for any ideas!

(Full image)

Answer 1

OK guys, finally found the solution

HTML:

<div class="table">
<div class="row hidden">
<div class="cell"></div>
<div class="cell-centered">fixed width 600px; row in yellow just to show cell alignment, actually goes "hidden"</div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell">
</div>
<div class="cell-fixed"><div class="fixed"><br>fixed width 200px<br><br></div></div>
<div class="cell relative">
<div class="outer absolute"><div class="inner absolute">100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%</div></div>
</div>
</div>
</div>
<div class="container"></div>

CSS:

body {margin: 0; text-align: center;}

.table {width: 100%; position: fixed; top: 50px;}
.row {display: table-row;}

.cell {
background: #ccc;
display: table-cell;
width: 50%;
}

.cell-centered {
background: #aaa;
display: table-cell;
min-width: 600px;
}
.cell-fixed {
background: #bbb;
display: table-cell;
min-width: 200px;
}

.fixed {
background: #1dcf53 ;
width: 200px;
}

.hidden .cell {background: #f0ff00 ;}
.hidden .cell-centered {background: #e0ee00;}
.relative {position: relative;}
.absolute {position: absolute;}

.outer {
width: 100%;
padding-right: 400px;
right: 0;
}

.inner {
background: #1dcfa6;
width: 100%;
right: 0;
}

.container {
background: #eee;
width: 600px;
height: 300px;
margin: auto;
}

Answer 2

in that photo i saw u need fluid space for left side that i dont know what should be the rule for width (fluid - something related to parent tag) , any way this link may be help u by extra little information about how this is work , Check here

in that link u saw the gray part , that gray part is fluid , other color part got fixed width , in any table if u use fix width for some table-cell and leave other with out set any width they will fill remind width n if this answer is not helpful it must be misunderstanding from me of ur problem

.table {
    display : table;
    height: 400px;
    width: 100%;     
    background-color: #808080;
}

.table > div {
    display: table-cell;
}

.right-box {
    width: 300px;
    background-color: blue;
}

.center-box {
    width: 100px;
    background-color: red;
}

Answer 3

for that u need to use structure like table -->

right-box will be fluid

<div class="table row-fluid">

    <div class="left-box"></div>

    <div class="center-box"></div>

    <div class="right-box"></div>

</div>

<style>

.table {
    display : table;
}

.table > .div {
    display: table-cell;
}

.left-box {
    width: fixed-with;
}

.center-box {
    width: fixed-with;
}

</style>

Answer 4

set .rightFluid to min-width:710px and add class pull-right.

.rightFluid{
     min-width:710px;
}

<div class="rightFluid pull-right">

I think, this should work.

You can see reference here: http://jsfiddle.net/ashishanexpert/B8L6L/