[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Вопрос про div
program90
Привет,
Подскажите, почему такой код работает неправильно. Т.е. почему в файрфокс элемент div (user_list) отображается не справа от элемента div (general_window), а в одном месте?
И еще - почему в Internet Explorer элемент general_window отображается справа, но его ширина меньше, чем должна быть.
Заранее спасибо


<html>
<head>
<style
type="text/css">
body {
margin: 0px;
padding: 0px;
}

#text_input {
position:relative;
top: 2%;
left: 2%;
background-color: red;
width: 75%;
height: 15%;
}

#general_window {
position: relative;
float: left;
top: 1.5%;
left: 2%;
background-color: orange;
width: 75%;
height: 80%;
display: inline;
}

#user_list {
position: relative;
top: 1.5%;
left: 4%;
background-color: navy;
width: 19%;
height: 80%;
}

#div_all {
position: absolute;
top: 0%;
left: 0%;
right: 0%;
bottom: 0%;
background-color: green;
}
</style>

</head>
<body>
<div
id="all">
<div
id="general_window">
</div>

<div
id="user_list">
</div>

<div
id="text_input">
</div>
</div>
</body>
</html>





Спустя 3 часа, 6 минут, 40 секунд (18.12.2010 - 23:19) inpost написал(а):
Обычно в relative размещают absolute, а не наоборот. Так лучше позиционировать.

Спустя 2 дня, 9 часов, 43 минуты, 28 секунд (21.12.2010 - 09:03) jumper_dev написал(а):
Может так
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style
type="text/css">
body {
margin: 0;
padding: 0;
}
div#all {
position: relative;
margin: 20px auto;
width: 980px;
min-height: 170px;
background: #e0e0e0;
}
div#user_list{
float: left;
width: 176px;
border: 1px solid orange;
}
div#general_window {
float: right;
border: 1px solid green;
width: 800px;
}
div#text_input {
clear: both;
width: 100%;
min-height:70px;
border: 1px solid red;
}
</style>
</head>
<body>
<div
id="all">
<div
id="general_window">
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
</div>
<div
id="user_list">
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
<p>
test, test, test,test, test, test,test, test, test,test,</p>
</div>
<div
id="text_input">
<p
style="text-align: center;">Подвал сайта =)</p>
</div>
</div>
</body>
</html>

Спустя 4 дня, 13 часов, 45 минут, 7 секунд (25.12.2010 - 22:48) program90 написал(а):
Спасибо jumper_dev!!!
И вам спасибо, inpost
)))
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.