Суммарная ширина вложенных float

alb · April 12, 2011

Приветствую, не могу победить особенность некоторых браузеров при вычислении суммарной ширины сестринских float-ов, в случае задания ширины родительского контейнера в процентах. Например:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {margin: 0; padding: 0; border: none; outline: none;}
#wrap {width: 60%; margin: 0 auto; background: #F3F; overflow: hidden;}
#nav {float: left; width: 100%; background: #039;}
#content {
    float: left;
    width: 100%;
}
#col1 {
    width: 30%;
    background: #999;
}
#col2 {
    width:40%;
    background: #696;
}
#col3 {
    width:30%;
    background: #0CF;
}

#content div {float: left; clear: right;}

</style>
</head>

<body>
<div id="wrap">
<div id="nav"><p>NAV</p></div>
<div id="content">
    <div id="col1"><p>Column 1</p></div>
    <div id="col2"><p>Column 2</p></div>
    <div id="col3"><p>Column 3</p></div>
</div>
</div>
</body>
</html>

Здесь, #wrap - главный родительский контейнер, который задаёт общую ширину в процентах, относительно которого уже и высчитываются все вложенные значения ширины, сабжевая проблема наглядно продемонстрированна на следующем скрине:

Здесь, справа от Column 3 видно малиновой фон внешнего контейнера (#wrap : ... background: #F3F;...) чего не должно быть, так как ширина предка для плавающих элементов col1-col3 задана в 100%, а их ширины (col1-col3) в сумме составляют 100%.

вот здесь, этот участок увеличен для большей наглядности:

Собственно, почему это происходит и как решить проблему кроссбраузерно ?

зы: "малиновая полоса" появляется в Opera (всех версий) и во всех webkit (то есть safari & chrom), отсутствует в IE8-9 и ФФ (> 3.6 версии, ниже у меня нет). Так же, эта особенность не проявляется в IE6-7, но там свои особенности и непроявляется она из-за другого бага, который фиксится clear: right и затрагивает другие особенности, но эти два браузера мы в расчёт не берём.

Спасибо!

Great Rash · April 12, 2011

Используйте таблицы если не хотите гемора.

Если вы все-таки хотите гемора.

alb · April 12, 2011

ясно, спасибо, в общем жесть оказывается...

осталось только решиь для себя чем можно поступиться - вернуться к таблицам или смириться с несемантичными обёртками

Gaspode · April 12, 2011

и во всех webkit (то есть safari & chrom)

Вебкит должен вылечицо, если поставить третьей колонке ширину 30.1%

А вот с оперой да, проблемы будут.

Sign In

Суммарная ширина вложенных float

Question

alb

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

alb

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information