плавающий div, охватывающий ширину родителей

Question

У меня есть родительский div, который охватывает ширину браузера с отступами на каждой стороне. Тогда у меня есть 2 плавающих div внутри этого родителя. Они оба настроены плавать влево. Первый имеет заданную ширину, а второй я хочу охватить оставшиеся родительские элементы. Когда я помещаю цвет фона на второй плавающий элемент div, он отображается только в виде ширины текста в элементе div. как я могу получить его, чтобы охватить левую часть от первого плавающего div с.

UPDATE Хорошо, вот jsfiddle, показывающий настройку. JSFIDDLE LINK Элемент div с красным фоном должен охватывать весь родительский элемент даже при масштабировании браузера.

Answer 1

Учитывая, что вы хотите, чтобы второй из дочерних элементов div был полной оставшейся шириной родительского элемента, вам не нужно float его. Учитывая следующую наценку:

​<div id="parent">
    <div id="one">The first div, fixed width</div>
    <div id="two">The second, taking up the rest of the space.</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

И CSS:

​#parent {
    width: 90%; /* adjust to taste */
    padding: 10px;
    background-color: #ffa; /* just to see where each element is in the document */
    overflow: hidden; /* to ensure the parent encloses the floated child div */
}

​#one {
    float: left;
    width: 100px; /* whatever width you need */
    background-color: red; 
}
#two {
    background-color: #f90;
}

Похоже, это дает искомый эффект: Демонстрация JS Fiddle , хотя тестируется только в Chromium 17 на Ubuntu 11.04.

<ч />

Отредактировано в ответ на комментарий от OP ниже:

Когда я удаляю float из моего второго div или в моем примере с jsfiddle, заголовок фона заполняет весь родительский элемент. Не уверен, что я делаю не так ...

Проблема в том, что float -элементный элемент извлекается из потока документа, а второй div (.title в вашей JS Fiddle ) простирается "за" ним.

Во избежание этого вам нужно удалить float из второго элемента div (он все еще находится в ссылке, которую вы разместили), а также присвоить margin-left элементу .title, чтобы он не принял полная ширина:

.title{
    padding: 17px 20px 0;
    background-color: red;
    height:54px;
    margin-left: 200px;    
}

JS Fiddle demo .

Если по какой-либо причине вы не можете дать margin-left, вместо этого вы можете использовать height: 100%; на float -ed div (.time), хотя это проблематично из-за padding (учитывая, что высота элемента определена-height + padding):

.time{
    padding: 17px 20px 0;
    float:left;
    margin-right: 20px;
    height: 100%;
    background-color: black;
}

JS Fiddle demo .

Чтобы исправить проблему height, в совместимых браузерах можно использовать свойство CSS box-sizing, чтобы включить padding в height:

.time{
    padding: 17px 20px 0;
    float:left;
    margin-right: 20px;
    height: 100%;
    background-color: black;
    box-sizing: border-box;
}

JS Fiddle demo .

Answer 2

Исходя из вашей ссылки jsfiddle на ваш комментарий под ответом Дэвида Томаса. Вот скорректированная CSS.

.holder{
 color:#fff;
 clear:both;
 width: 100%;
 background-color:#2d2f31;
 height: 70px;
 padding-bottom: 1px;
 margin: 12px 0;
}

.time{
padding: 17px 20px 0;
float:left;
margin-right: 20px;
height: 54px;
background-color:#2d2f31;
}
.title{
padding: 17px 20px 0;
background-color: red;
height:54px;         
}
.title span{
display:block;
font-size:12px;
line-height: 1.25em;
color:#646464;
}

Answer 3

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

Answer 4

Если вы установите левый div на фиксированную ширину и плавающий влево, как вы упомянули, тогда вы можете просто установить поле следующего div на ширину первого и убедиться, что он не плавает.Например:

#left_div{
float: left;
width: 180px;
}

#right_div
{
margin-left: 200px;
}

Это должно работать нормально.

Answer 5

Это невозможно с простым CSS. Либо вы используете не очень аккуратный макет таблицы, либо вы исправляете javascript, который тоже не аккуратный, но лучшее решение, которое я бы сказал.

Тем не менее: вы можете сделать обходные пути, если это важно только для bgcolor или чего-то подобного. Это так?