Проблем с позициониране на див под mozilla

Y

ystefanov

Registered
Имам следните 2 проблема. В долупосоченият код съм направил 2 дива(ляв и десен), които искам при допълване на текст от ляво или от дясно да се изместват на долу дива със червен фон под тях. И също така как мога да направя така, че дивът "container" да обхваща съдържанието (дивовете) около него, в случая трябва ли да му задам височина, забелязвам че със height: auto не се получава.Проблемите са само при интерпретирането му под MF.

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">
.container{width: 850px; height: auto; margin: 0 auto; border: 1px solid black;}
.left{ width: 300px; height: auto; float: left; border: 1px solid green;}
.right{width: 500px; height: auto; float: right; border: 1px solid blue;}
.bottom{width: 850px; height: 20px; background-color:#F00 }


</style>
</head>

<body>
<div class="container">

<div class="left">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left 
</div>
<div class="right">right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right </div>
<div class="bottom"></div>
</div>
</body>
</html>
 
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">
.container{width: 850px; height: auto; margin: 0 auto; border: 1px solid black; background-color: #a7a7a7; }
.left{ width: 300px; height: auto; float: left; border: 1px solid green;}
.right{width: 500px; height: auto; float: right; border: 1px solid blue;}
.bottom{width: 850px; height: 20px; background-color:#F00 }


</style>
</head>

<body>
<div class="container">

<div class="left">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
</div>
<div class="right">right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right </div>
<div style="clear: both;"></div>
<div class="bottom"></div>
</div>
</body>
</html>

Запомни, да изчистваш float-овете със clear: both ;)
 
А така правилно ли е, т.е. ако заменя <div style="clear: both;"></div> със clear:both; на .bottom

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">
.container{width: 850px; height: auto; margin: 0 auto; border: 1px solid black; background-color: #a7a7a7; }
.left{ width: 300px; height: auto; float: left; border: 1px solid green;}
.right{width: 500px; height: auto; float: right; border: 1px solid blue;}
.bottom{width: 850px; height: 20px; background-color:#F00; clear:both;}


</style>
</head>

<body>
<div class="container">

<div class="left">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
</div>
<div class="right">right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right </div>

<div class="bottom"></div>
</div>
</body>
</html>
 
А така правилно ли е, т.е. ако заменя <div style="clear: both;"></div> със clear:both; на .bottom
Увеличете...

Можеш и така да го изчистиш, вече според зависи тоя bottom какво ще се прави с него.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе