Жидкость div рядом с фиксированным div

Question

У меня есть Bootstrap framework для основы сайта. Теперь основное содержание - скажем, 1000 пикселей в ширину. Тогда у меня есть эта 100% широкая область, внутри которой я сосредоточил площадь 1000 пикселей. Но ...

1. Левая часть фиксированной ширины 290px.
2. Правая длинная секция - это ширина жидкости и начинается прямо с границы левой части, и она заканчивается там, где заканчивается контейнер шириной 100%.
3. Внутри правой длинной секции находится фиксированный контент 710px.

Я хочу иметь жидкую ширину правильного содержания. Изображение слайдера или карты Google или что-то в этом роде.

Я думаю, что основной HTML должен быть:

<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> 

спасибо за любые идеи!

(Full image)

Answer 1

набор .rightFluid в мин-ширина: 710px и добавить класс втягивания право.

.rightFluid{ 
    min-width:710px; 
} 

<div class="rightFluid pull-right"> 

Я думаю, это должно работать.

Вы можете увидеть ссылку здесь: http://jsfiddle.net/ashishanexpert/B8L6L/

Answer 2

для этого и нужно использовать структуру наподобие таблицы ->

правый ящик будет жидкость

<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 3

на этой фотографии я видел U нужно жидкость пространство для левой стороны, что я не знаю, каково должно быть правило для ширины (жидкость - что-то связано с родительским тегом), каким-либо образом эта ссылка может помочь с дополнительной информацией о том, как это работает, Check here

В этой связи вы видели серое сечение, что серая часть является жидкостью, другая цветная часть имеет фиксированную ширину, в любой таблице, если вы используете фиксированную ширину для какой-либо табличной ячейки и оставляете другую без установленной ширины, которую они заполнят напоминаю ширина п, если этот ответ не полезно это должно быть недопонимание от меня ур проблемы

.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 4

ОК, ребята, наконец, нашли 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; 
}