Две разделители одной и той же линии, одна динамическая ширина, одна фиксированная

У меня есть два divs под одним родителем div, родительский div имеет 100% ширину:

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

Условия:

Я хочу два divs в одной строке.
Правильный div может присутствовать или отсутствовать. Когда он присутствует, я хочу, чтобы он всегда фиксировался справа. Однако левый div должен быть эластичным - ширина зависит от его содержания.

Я пробовал как float: left, так и dispaly: inline-block, но ни одно решение не работает.

Любое предложение будет оценено.

Ответ 1

Я бы пошел с @sandeep display: table-cell ответить, если вам неинтересно IE7.

В противном случае, здесь альтернатива, с одним недостатком: "правый" div должен быть первым в HTML.

Смотрите: http://jsfiddle.net/thirtydot/qLTMf/
и точно так же, но с удаленным "правым div": http://jsfiddle.net/thirtydot/qLTMf/1/

#parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 100px;
    background: #ccc
}
<div id="parent">
    <div class="right">right</div>
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>

Ответ 2

@Yijie; Проверьте ссылку может быть, что вы хотите http://jsfiddle.net/sandeep/NCkL4/7/

РЕДАКТИРОВАТЬ:

http://jsfiddle.net/sandeep/NCkL4/8/

ИЛИ СМОТРЕТЬ СЛЕДУЮЩУЮ СНИППЕТУ

#parent{
    overflow:hidden;
    background:yellow;
    position:relative;
    display:table;
}
.left{
    display:table-cell;
}
.right{
    background:red;
    width:50px;
    height:100%;
    display:table-cell;
}
body{
    margin:0;
    padding:0;
}

<div id="parent">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="right">fixed</div>
</div>

Ответ 3

HTML:

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

(div.right должно быть до div.left в разметке HTML)

CSS

.right {
float:right;
width:200px;
}

Ответ 4

Таким образом, левый div-стиль зависит от наличия правого div. Я не могу придумать селектор CSS, позволяющий подобное поведение.

Таким образом, мне кажется, что вам нужно программно добавить сторону сервера класса (или в JS) в родительский div или левый div, чтобы сделать это.

<div id="parent twocols">
  <div class="left"></div>
  <div class="right"></div>
</div>

или

<div id="parent">
  <div class="left"></div>
</div>

Правильный стиль всегда:

.right {
    float: right;
    width: 200px; /* or whatever value you need */
    /* margin and padding at your discretion */
}

и левый стиль:

.parent.twocols .left {
    margin-right: 200px; /* according to right div width + margin + padding*/
}

Ответ 5

У меня был успех с использованием white-space: nowrap; на внешнем контейнере, дисплей: встроенный блок; на внутренних контейнерах, а затем (в моем случае, так как я хотел, чтобы второй обернул слово) white-space: normal; на внутренних.

Ответ 6

Я думаю, вам это нужно:

<html>
<head>
<style type="text/css">
#parent 
{width:100%;
height:100%;
border:1px solid red;
}
.left
{
float:left;
width:40%;
height:auto;
border:1px solid black;
}
.right
{
    float:left;

width:59%;
height:auto;
border:1px solid black;
}
</style>
</head>
<body>
<div id="parent">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="right">This is the right side content</div>
</div>
</body>
</html>

Вот демо: http://jsfiddle.net/anish/aFBmN/