Блок лезет за пределы

Alben · July 1, 2011

Немогу понять почему блок sidebar вылазиет за пределы. Надо, что бы он растягивался в нутри, а он наружу лезет. Может кто подскажет?

Вот код HTML:

<!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>
<title>[title]</title>
<link href="imgdiyan/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="shortcut icon" href="/files/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="wrap">
<div id="masthead">
   </div>
<div id="menu">
	<ul>
		<li><a href="/" class="current"><span>О компании</span></a></li>
		<li><a href="/dir/file/uslugi.html"><span>Услуги</span></a></li>
		<li><a href="/dir/file/shema-raboti.html"><span>Схема работы</span></a></li>
		<li><a href="/dir/file/ceni.html"><span>Цены</span></a></li>
		<li><a href="/dir/file/messages.html"><span>Контакты</span></a></li>								
	</ul>
</div>

<div id="container">
 <div id="sidebar">
      <h3>НОВОСТИ</h3>
      [news]
<a href="/news/">Все новости>>></a>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
<div><h3>Контакты</h3></div>
</div> 
    <div id="content">
      <h3>[zagolovok]</h3>
      <p>[body]</p>
    </div>
    </div>
  <div id="footer">
[copyright]
</div>
</div>
</body>
</html>

Вот CSS:

html, body { 
margin : 0;
padding : 0;
} 
body { 
font : 73% Arial, "Trebuchet MS", Helvetica, Tahoma, sans-serif;
background:#005480;
color : #555;
} 
			/*WRAP*/
#wrap { 
width : 770px;
margin-left : auto;
margin-right : auto;
padding : 0;
border: 5px solid #fff;
color : #555;
background : #fff;
} 
			/*BANNER*/
#masthead {
padding : 0;
margin-bottom : 0px;
height:150px;
background: url(air.jpg);
}
.px {
	background:#FFF;
	height:5 px;
}
			/*MAIN CONTAINER*/


#container { 
width : 770px;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
padding : 0;
line-height : 1.8em;

} 

			/*TOP NAVIGATION*/
#content { 
padding : 0 1em 0 1em;
margin : 0 240px 0 0;
border-right : 1px solid #eee;
} 
			/*SIDEBAR*/
#sidebar {
float : right;
width : 200px;
margin-top : 0;
margin-bottom:0;
padding : 0 1em 0 1em;

} 
			/*FOOTER*/
#footer { 
height : 40px;
text-align : center;
color:#FC0;
background: url(fm_menu_bg.jpg) repeat-x;
line-height:40px;
width:770px;
} 
			/*TYPOGRAPHY*/

h1 { 
float : left;
margin : 0;
padding : 20px 0 20px 25px;
font-family:150% "Times New Roman", Times, serif;
letter-spacing : 5px;
color : #fff;
} 
h2 { 
float : right;
margin : 0;
padding : 5px 20px 20px 0;
font-family:90% "Times New Roman", Times, serif;
letter-spacing : 3px;
color : #4592be;
} 
h3 {
padding : 20px 0 20px 0;
margin : 0;
border-bottom : 1px solid #aaa;
font-family: 150% "Times New Roman", Times, serif;
text-transform : uppercase;
letter-spacing : 3px;
color:#036;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
} 
			/*LINKS*/
a:link, a:visited { 
color : #1E4258;
background : inherit;
text-decoration : underline;
} 
a:hover { 
color : #DF9C05;
background : inherit;
text-decoration : none;
} 
a img {
border: 0;
}
			/*IMAGES*/
.left { 
float : left;
border : 0 solid #656c4a;
margin : 5px 0 10px 0;
padding : 10px;
} 
			/*SEARCH BOX*/
legend { 
margin-bottom : 30px;
color : #143c55;
} 
input { 
background : #eee;
} 

             /*MENU*/



#menu{
	width:100%;
	height:50px;
	background:url(fm_menu_bg.jpg) repeat-x scroll 0 0 transparent;
	margin-top:5px;
}
	#menu ul{
		width:80%;
		margin:0 auto;
		list-style:none;
	}
		#menu li{
			list-style:none;
			display:block;
			float:left;
			font-size:11px;
			font-weight:bold;
			height:50px;
			line-height:50px;
			margin:0 5px;
		}
			#menu li a{
				display:block;
				float:left;
				height:50px;				
				color:#99a2b7;
				text-decoration:none;
				text-transform:uppercase;
				padding:0 20px;				
			}
				#menu li a:hover{	
					background:url(fm_hover_bg.jpg) repeat-x scroll 0 0 transparent;
					color:#DF9C05;
					display:block;
					float:left;

				}

					#menu li .current{
						list-style:none;
						cursor:pointer;
						display: block;
						float: left;
						height:50px;				
						text-decoration:none;
						text-transform:uppercase;
						padding:0 20px;		
					}

Вот скрин:

ctpz · July 1, 2011

У вас высота сайдбару не указана. Он может на много вниз протянуться.

Softlink · July 1, 2011

#container { 
width : 770px;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
padding : 0;
line-height : 1.8em;
overflow:hidden;
}

Alben · July 1, 2011

У вас высота сайдбару не указана. Он может на много вниз протянуться.

Втом то и дело, если я выставлю высоту, то она будет фиксированной, а мне надо что бы сайдбар растягивал контент. И немешал ему если контента больше.

#container {
width : 770px;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
padding : 0;
line-height : 1.8em;
overflow:hidden;
}

Увы, не работает. http://www.111-cargo.ru/dir/file/shema-raboti.html

Edited July 1, 2011 by Alben

Softlink · July 1, 2011

Увы, не работает. http://www.111-cargo.ru/dir/file/shema-raboti.html

все работает, я не вижу, чтобы вы поставили то, что я вам написал

есть разница?

у вас сейчас:

#container { 
width : 770px;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
padding : 0;
line-height : 1.8em;

}

и мой код:

#container { 
width : 770px;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
padding : 0;
line-height : 1.8em;
overflow:hidden;
}

Alben · July 1, 2011

все работает, я не вижу, чтобы вы поставили то, что я вам написал

Извеняюсь, не тот фаил загрузил. Примного благодарен!!!)) :yahoo:

Softlink · July 1, 2011

все работает, я не вижу, чтобы вы поставили то, что я вам написал
Извеняюсь, не тот фаил загрузил. Примного благодарен!!!))

то-то же

Edited July 1, 2011 by Softlink

Sign In

Блок лезет за пределы

Question

Alben

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

ctpz

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Alben

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Alben

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information