Jump to content
  • 0

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


slopen
 Share

Question

простейший пример

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

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

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

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

1

l

l

l

...

2

r

r

r

...

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

как вариант

<!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>

Link to comment
Share on other sites

  • 0

Scrum, спасибо.

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

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

Link to comment
Share on other sites

  • 0

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

На странице есть 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) и вы увидете, что данные браузеры с ней делают.

Link to comment
Share on other sites

  • 0
2Shadow Men

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

top right bottom left

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy