[CSS] float:left & overflow
Есть код:
[HTML]<!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=windows-1251" />
<meta http-equiv="Content-Language" content="ru" />
<title>Title</title>
<style type="text/css">
/* Left block */
#cleft {
width: 300px;
float: left;
border: 1px solid red;
}
/* Right block */
#ccontent {
margin-left: 320px;
overflow: hidden;
border: 1px solid green;
}
/* Other */
div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="cleft">Left block</div>
<div id="ccontent">Right block</div>
<div class="clear"></div>
</body>
</html>[/HTML]
Любопытно как ведут себя некоторые браузеры (Opera, Chrome, Safari). Если блоку ccontent указать стиль overflow, Opera считает левый отступ второго блока относительно первого, а не от родителя. Chrome и Safari делает отступ справа.
Сходу не могу понять логику, глюк это, или нормальное поведение и я не знаю каких-то особенностей применения этих стилей?
[HTML]<!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=windows-1251" />
<meta http-equiv="Content-Language" content="ru" />
<title>Title</title>
<style type="text/css">
/* Left block */
#cleft {
width: 300px;
float: left;
border: 1px solid red;
}
/* Right block */
#ccontent {
margin-left: 320px;
overflow: hidden;
border: 1px solid green;
}
/* Other */
div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="cleft">Left block</div>
<div id="ccontent">Right block</div>
<div class="clear"></div>
</body>
</html>[/HTML]
Любопытно как ведут себя некоторые браузеры (Opera, Chrome, Safari). Если блоку ccontent указать стиль overflow, Opera считает левый отступ второго блока относительно первого, а не от родителя. Chrome и Safari делает отступ справа.
Сходу не могу понять логику, глюк это, или нормальное поведение и я не знаю каких-то особенностей применения этих стилей?
Все дело в умолчальных стилях, которые браузеры приписывают блокам.
Указывайте явно float'ы и position'ы.
Если хотите, чтобы поведение было предсказуемым во всех браузерах (я не имею ввиду ИЕ - там отдельная история) - прописывайте всё, ничего не оставляйте недосказанным в стилях.
Указывайте явно float'ы и position'ы.
Если хотите, чтобы поведение было предсказуемым во всех браузерах (я не имею ввиду ИЕ - там отдельная история) - прописывайте всё, ничего не оставляйте недосказанным в стилях.