div выходит за границы родителя

ProMira · March 16, 2013

Здравствуйте, делаю скелет шаблона, столкнулся с проблемой, при использовании float:left, блок выходит за границы родителя. Тег используется всего 2 раза, в одной части сайта. Проблемная часть помечена в коде.

HTML


<html>
<head>
<title>Games For Life</title>
<link rel="stylesheet" type="text/css" href="template.css"/>
</head>
<body>
<div id="body">
<!--Head-->
<div id="head"></div>
<div id="link"></div>
<!--/Head-->
<div id="flash"><img src="images/flash.jpg" border="0"/></div><h4 class="indi_name"><u>Инди-проекты:</u></h4>
<div id="indi">
<table class="indi_tabl" cellpadding="0" cellspacing="0" border="0">
	 <tr>
	 <td class="indi1">
	 <span class="indi_name">
	 <img src="images/indi.png" class="img" border="1"/>
		 <h4 class="indi_name"><u>Мега крутой заголовок</u></h4>
		 <p class="indi_content">А тут совсем немного текста, описание и прочее, ограничение по символам 3-4 строчки..</p>
	 </span>
	 </td>
	 <td class="indi1">sdfg</td>
	 <td class="indi1">sdfg</td>
	 <td class="indi2">sdfg</td>
	 </tr>
</table>
</div>
<div id="block">

	 <!--/Проблемный блок-->

<div class="container">
	 <table class="news" cellpadding="0" cellcpacing="0">
	 <tr>
	 <td>ololololololo</td>
	 </tr>
	 <tr>
	 <td>ololololololo</td>
	 </tr>
	 </table>
</div>
<div class="container"><br><br><br>sdfgfdsfg</div>
<div>sdfgfdsfg</div>
<!--/Пробелмный блок-->
</div>


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

css


body {
margin: 0 auto;
background-color: #424340;
}
#body {
margin: 0 auto;
width: 900px;
background-color: #fafafa;
border: 1px #bdbdbd solid;
-moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Для Firefox */
-webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Для Safari и Chrome */
box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Параметры тени */
}
#head {
width: 100%;
height: 100px;
background-image: url('images/bg_head.png');
}
#link {
width: 100%;
height: 29px;
background-image: url('images/bg_link.png');
}
#flash {
width: 800px;
margin: 0 auto;
}
#indi {
width: 100%;
background-color: #fafafa;
border-top: 1px #bdbdbd solid;
border-bottom: 1px #bdbdbd solid;
}
.img {
margin-top: 5px;
margin-bottom: 0px;
}
.indi_content {
margin-top: 0px;
margin-left: 13px;
font-size: 13px;
}
.indi_name {
margin-left: 13px;
margin-top:0;
margin-bottom: 0px;
padding: 0px;
}
.indi1 {
width: 225px;
border-right: 1px #bdbdbd solid;
margin: 0 auto;
}

#block {
width: 100%;
}
.container {
width: 300px;
height: 400px;
}
.news {
width: 250px;
margin: 0 auto;
border-top: 1px #bdbdbd solid;
border-left: 1px #bdbdbd solid;
border-bottom: 1px #bdbdbd solid;
border-right: 1px #bdbdbd solid;
}

#footer {
width: 100%;
height: 100px;
background-image: url('images/bg_footer.png');
}

Edited March 16, 2013 by ProMira

skatadov · March 16, 2013

Т.е. вы применяете для .container float:left, после чего .container выходят за пределы #block, я правильно понял проблему?

Попробуйте задать для #block overflow: hidden;

Николя223 · March 16, 2013

попонятнее напишите. к какому элементу float? можно после всех элементов с float поставить пустой с классом clear(clear: both;)

ProMira · March 16, 2013

Спасибо, помогло.

Sign In

div выходит за границы родителя

Question

ProMira

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

skatadov

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

ProMira

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information