CSS Div 100% с поплавком: левый

Агр, CSS - проклятие моей жизни. Может кто-нибудь помочь здесь?

Я пытаюсь получить следующий макет div:

*******************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*******************************************************************************

В настоящее время мои стили выглядят следующим образом:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
}

#b {
float:left;
width:50px;
height:50px;
}

#c {
float:left;
width:100%;
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

Но это вызывает следующее (div c падает ниже остальных):

********************************************************************************
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*aaaaaaaaaa bbbbbbbbbbbb                                                       *
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
*cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
********************************************************************************

Что нужно изменить, чтобы исправить это? Спасибо.

Дополнительная информация:

a и b должны иметь фиксированные ширины пикселей.
Это упрощенный пример - на самом деле у div есть границы, которые не должны пересекаться.

Ответы

Ответ 1

Просто не float последний div, тогда он будет работать. Также удалите 100% ширину и дайте ей левый край ширины ваших двух разделов с фиксированной шириной. Это должно выглядеть так:

http://jsfiddle.net/YMQbh/

Ответ 2

Не плавайте div "c" . В качестве элемента блока он, естественно, займет всю горизонтальную ширину окна просмотра.

Что вы хотите сделать, так это просто использовать поле с левой стороны "c" , чтобы дать "a" и "b" комнату рядом с "c"

Попробуйте следующее:

#container {
height:50px;
}

#a {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#b {
float:left;
width:50px;
height:50px;
border: 1px #000 solid; /* takes up 2px width - 1px on either side */
}

#c {
/*   2x 50px wide div elements = 100 px
 * + 2x  1px left borders      =   2 px
 * + 2x  1px right borders     =   2 px
 *                              =======
 *                               104 px
 */
margin-left: 104px; 
}

Ответ 3

прежде всего, лучше иметь контейнер с фиксированной шириной. Следующее, что 100% с "c" относится к контейнеру, поэтому он будет охватывать всю ширину контейнера.

Update: Чтобы сказать это более точно: c div не требует плавания без ширины. Как и другие, уже сказанные: div (как элемент уровня блока) охватывает всю свою ширину.

Ответ 4

Я думаю, что просто оставить атрибут ширины вообще для c div должен делать работу. Обычно DIVs будут охватывать всю ширину, которую они могут получить. Этот пример работал у меня:

<html>
<head>
    <style type="text/css">
        #a {
            width: 50px;
            height: 50px;
            float: left;

            background-color: #ffff00;
        }

        #b {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #ff00ff;
        }

        #c {
            height: 50px;
            background-color: #00ffff;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>

Ответ 5

Вместо того, чтобы плавать #c, я бы дал ему margin-left и оставил width как автоматический.

Ответ 6

Здесь вы идете:

<div style='width:200px;background:yellow;float:left'>One</div>
<div style='width:200px;background:orange;float:left'>Two</div>
<div style='background:khaki'>Three</div>

Можно настроить ширину One и Two по мере необходимости. Протестировано в FF 3.6, IE 8, Safari 4.0, Chrome 3.195.

ИЗМЕНИТЬ

Теперь, с границами:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid green;margin:0 -1px'>Two</div>
<div style='background:khaki;border:1px solid black;margin-left:400px'>Three</div>

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

Неперекрывающиеся границы (и контрастные цвета), горячие нажатием:

<div style='width:200px;background:yellow;float:left;border:1px solid red;margin:0 -1px;'>One</div>
<div style='width:200px;background:orange;float:left;border:1px solid blue;margin:0 -1px 0 1px'>Two</div>
<div style='background:purple;border:1px solid orange;margin-left:403px'>Three</div>

Ответ 7

#container {
float:left
width:100% /*for liquid layout*/
width:960px /*fixed layout*/
height:50px;
}

#a {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#b {
float:left;
width:50px;
/*or*/
width:5%;
height:50px;
}

#c {
float:left;
width:90%;
/*or*/
width:860px; /* subtract the sum of the container a+b from the container c. */
height:50px;
}

<div id="container">
   <div id="a" />
   <div id="b" />
   <div id="c" />
</div>

Если вы добавляете отступы, край справа или слева или оба, вы должны также вычесть их из общей ширины.