float lef и float right - проблема с clear в разных браузерах?

slopen · September 23, 2007

я думаю, что никого не удивить тем, что IE и Firefox отоброжают это по-разному.

однако логика именно файрфокса мне непонятна. мне лично кажется, что по спецификации IE отображает данных пример корректно. если я не прав - объясните почему.

хочется, естественно, сделать так, чтобы в разных браузерах этот пример отображался одинаково (так как в IE). свойствами css это возможно?

p.s. при этом нужно чтобы в html части дивы шли именно в этом порядке:

1

l

...

2

r

...

Scrum · September 23, 2007

как вариант

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>"float - left and right" element</title>
	<style type="text/css">

		.containingbox
		{
			width: 500px;
			height: 500px;
			background-color: #404040;
		}
 #leftblock {
 border: 1px solid red;
 float: left;
 width: 100px;
 }


		.floatleft
		{
			height: 100px;
			background-color: darkorange;
			border: 1px solid #000;
		}
 #rightblock {
 border: 1px solid red;
 float: right;
 width: 306px;
 }


		.floatright
		{
 float: right;
			width: 100px;
			height: 100px;
			background-color: silver;
			border: 1px solid #000;
		}
</style>
</head>
<body>
<div class="containingbox">
 <div id="leftblock">
		 <div class="floatleft">l</div>
		 <div class="floatleft">l</div>
 		 <div class="floatleft">l</div>
 </div>
 <div id="rightblock">
		 <div class="floatright">r</div>
 		 <div class="floatright">r</div>
 		 <div class="floatright">r</div>
 </div>
</div>
</body>

</html>

musulman · September 23, 2007

не знаю у меня вроде бы все нормально.

можно увидеть код ?

slopen · September 23, 2007

Scrum, спасибо.

но я не вполне корректно сформулировал задачу. сейчас я подправил пример, чтоб было более понятно зачем именно так надо. как вариант объединение в блоки не подходит (должны быть именно плавающие), так как порядок блоков слева и отсутствие зазоров важно. то есть нужно оменно обтекание.

musulman -- нормально это как? ) нужно чтобы левые блоки были подогнаны к верху и правые тоже, без зазоров между верхней границей (вот так).

Shadow Men · October 15, 2007

У меня вот такая проблема.

На странице есть 3 основных блока:

1. "левый блок" - page_left (300px)

2. "правый блок" - page_right (700px)

3. "нижний блок" - footer (1000px)

Для правильности отображения нижнего блока, первые два объединены в один. т.е. структура примерно такая:

блок - "page" (1000px)

в нем блок "page_left" и "page_right"

под ним блок "footer".

Сама проблема:

в блоке "page_left" использовано свойство (float: left;), соотвественно следующий блок "page_right" должен находиться справа от него, в IE так и есть, а вот в Мазилке и Опере, текст как и положено оптекает левый блок, а вот сам блок (фон, рамка) накладывается на него.

Т.е. сам блок смещается до упора влево, под текст остается (700-300) 400px и соответсвенно 300рх справа просто остаются чистыми, если поставить отступ (left 300) то проблема исчезает, но появляется тогда проблема в IE, как вы догадались, правый блок смещается на 300рх не от края страницы, а от левого блока, как сделать чтоб работало во всех браузерах одинаково?

Данная проблемная страница находится тут.

Откройте ее в IE (тестировалась в версиях 6 и 7) и вы увидете, как я хочу чтоб она отображалась, откройте ее в Мазиле (2.0.0.2) или Опере (9.23 сборка 8808) и вы увидете, что данные браузеры с ней делают.

strix · October 15, 2007

2Shadow Men

для необтекаемого блока задайте соответствующий margin, равный ширине плавающего блока

div.page_left{float:left;width:300px}
div.page_right{margin-left:300px}

Shadow Men · October 15, 2007

strix said:
2Shadow Men
для необтекаемого блока задайте соответствующий margin, равный ширине плавающего блока
div.page_left{float:left;width:300px}
div.page_right{margin-left:300px}

Вот спасибо вам большое!!!

Кстати такая вот форма написания не будет отличаться от вашей?

div.page_right{margin:0px 300px 0px 0px}

Т.е. можно задавать и другие значения отступа, правильно?

Спасибо еще раз!

strix · October 15, 2007

Quote
Кстати такая вот форма написания не будет отличаться от вашей?
div.page_right{margin:0px 300px 0px 0px}
Т.е. можно задавать и другие значения отступа, правильно?

Будет отличаться, так как в сокращ?нной форме записи порядок следующий:

top right bottom left

То есть - это будет правый отступ, а не левый (как нужно в данном случае)

Dimitry Wolotko · October 15, 2007

0px можно заменить просто на 0 - ведь ноль, он и в африке ноль.

Shadow Men · October 15, 2007

Всем спасибо, все работает.

strix · October 16, 2007

Dimitry Wolotko said:
0px можно заменить просто на 0 - ведь ноль, он и в африке ноль.

У меня уже привычка указывать единицы измерения

Если надо изменить отступ - просто меняю цифру, не проверяя лишний раз - указаны ли единицы измерения.

klierik · October 16, 2007

аналогично.

что-то прибилось ко мне писать, к примеру, так:

margin: 0px auto;

Dimitry Wolotko · October 16, 2007

А я вообще неправильно поступаю, без px указываю, только если нужны не иные единицы измерения.

Dimitry Wolotko · October 16, 2007

Не говори ))

yopopt · October 16, 2007

Dimitry Wolotko said:
А я вообще неправильно поступаю, без px указываю, только если нужны не иные единицы измерения.

Если стоит доктайп "strict", то браузер наплю?т на эту запись. То есть width:20; будет считаться неправильной записью и игнорироваться.

Dimitry Wolotko · October 16, 2007

yopopt, я знаю, спасибо =)

yopopt · October 16, 2007

Dimitry Wolotko said:
yopopt, я знаю, спасибо =)

Всегда пожалуйста.

Sign In

float lef и float right - проблема с clear в разных браузерах?

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information