Странное поведение тега div

SnowWind · May 18, 2011

Вот какое дело, не пойму поведение дива, что такое присходит, а картина следующая, щас изображу схематически

<div class="content"></div>
<div class="div.doska_menu"></div> 
<div class="menu_temp">Какой-то текст</div>

div.doska_menu {
width:400px;
height:400px;
margin-top: 10px;
margin-left: 0px;
padding: 0px;
float:left;
background-image:url(../images/doska_menu.png);
background-repeat:no-repeat;
border:3px solid black;
}

div.content {
height:90%;
min-height:200px; 
padding:0px;
width:800px;
margin-left:420px;
margin-top:10px;
border:3px solid black;
}

div.menu_temp {
width:400px;
height:400px;
margin: 0px;
padding: 0px;
background-image:url(../images/doska_menu.png);
background-repeat:no-repeat;
border:3px solid red;
}

Почему так происходит? Почему блок div.menu_temp залазит на блок div.doska_menu? И почему ткст из блока div.menu_temp отображается совсем не в нём?

D1mK4 · May 18, 2011

тут была глупость

Edited May 18, 2011 by D1mK4

zSpx · May 18, 2011

добаввь

{
float:left;
}

к остальным элементам и сделай margin-left: 20px для div.content

!плавающие элементы выходят из общего потока.

Edited May 18, 2011 by zSpx

ShumNo · May 18, 2011

Потому что у div.doska_menu

стоит float за чем он там есть следующий блок должен идти снизу?

Edited May 18, 2011 by ShumNo

D1mK4 · May 18, 2011

SnowWind можно вот так.


<!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=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.leftContainer {
float: left;
}

.menu {
width:400px;
height:400px;
background-image:url(../images/doska_menu.png);
background-repeat:no-repeat;
border:3px solid black;
}

.menu2 {
width:400px;
height:400px;
margin: 0px;
background-image:url(../images/doska_menu.png);
background-repeat:no-repeat;
border:3px solid red;
}

.content {
height:90%;
min-height:200px; 
padding:0px;
width:800px;
margin-left:420px;
margin-top:10px;
border:3px solid black;
}
</style>
</head>
<body>

<div class="leftContainer">
<div class="menu">меню</div> 
<div class="menu2">Какой-то текст</div>
</div>

<div class="content">контент</div>

</body>
</html>

Edited May 18, 2011 by D1mK4

iillyyaa2 · May 18, 2011

а это разве хорошо ??

<div class="div.doska_menu"></div>

SnowWind · May 18, 2011

zSpx

Это не помогло

добаввь
{
float:left;
}
к остальным элементам и сделай margin-left: 20px для div.content
!плавающие элементы выходят из общего потока.

ShumNo

Это ничего не дало

Потому что у div.doska_menu
стоит float за чем он там есть следующий блок должен идти снизу?

D1mK4 - а вот это уже идея

D1mK4 · May 18, 2011

SnowWind получилось?

SnowWind · May 19, 2011

D1mK4

ага, вроде работает :facepalmxd:

тебе в профиле комментарий оставил в виде ICQ м.б добавишь.

Sign In

Странное поведение тега div

Question

SnowWind

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

D1mK4

Link to comment

Share on other sites

zSpx

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

D1mK4

Link to comment

Share on other sites

iillyyaa2

Link to comment

Share on other sites

SnowWind

Link to comment

Share on other sites

D1mK4

Link to comment

Share on other sites

SnowWind

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information