Background оболочки не растягивается

Segnava · June 11, 2014

Доброго времени суток.

Проблема в том что фоновая заливка не растягивается из-за того что прописаны float.

<!DOCTYPE html><html><head>	<title>Clinica</title>	<meta charset='utf-8'>	<link rel="stylesheet" type="text/css" href="./html5reset-1.6.1">	<link rel="stylesheet" type="text/css" href="./style.css"></head><body><div class="top">	<ul>		<li><a href="">Главная</a></li>		<li><a href="">О нас</a></li>		<li><a href="">Контакты</a></li>	</ul></div><div class="white_fon"><div id="wrap"><header><div id="head_logo"></div><div id="top_menu">	<ul>		<li><a href="">Главная</a></li>		<li><a href="">Новости</a></li>		<li><a href="">Услуги</a></li>		<li><a href="">Контакты</a></li>		<li><a href="">О копмании</a></li>		<li><a href="">Помощь</a></li>		<li><a href=""></a></li>	</ul></div></header><div id="container"><div class="left_menu_wrap"><nav id="left_menu"><h1><span>Навигация по сайту</span></h1><ul>	<li><a href="">Главная</a></li>	<li><a href="">Форум</a></li>	<li><a href="">Новости</a></li>	<li><a href="">Блог</a></li>	<li><a href="">Решения</a></li>	<li><a href="">Разширеный поиск</a></li></ul></nav><nav id="reklama"><img src="./img/reklama.jpg"></nav></div><div id="content"><article id="first_news"></article><article id="second_news"></article><br><article id="first_news"></article><article id="second_news"></article><br></div></div></div></div></body></html>

body {	background: #e9e9e9;}a {	text-decoration: none;	font-family: Tahoma, sans-serif;	font-size: 15pt;}#wrap {	margin: auto;	width: 1200px;}.white_fon {	padding-top: 25px;	padding-bottom: 25px;	margin: auto;	width: 1200px;	background-color: white;}/* Head */.top {	margin: auto;	width: 1200px;	height: 43px;}.top ul {	padding: 0;}.top a {	color: #78c7f3;}.top li:first-child {	padding-right: 15px;	list-style: none;}.top li {	width: 100px;	float: left;	color: #b8b8b8;}#head_logo {	margin: auto;	display: block;	width: 1144px;	height: 398px;	background: url(./img/head_logo.jpg) no-repeat;}/* Top Menu */#top_menu {	margin: auto;	width: 1146px;}#top_menu ul {	width: 1155px;	list-style: none;	padding: 0px;}#top_menu li {	width: 162px;	height: 55px;	float: left;	margin-left: 2px;	background: url(./img/bg_top_menu.jpg) repeat-x;	text-align: center;	line-height: 55px;}#top_menu li:hover {	background: url(./img/bg_top_menu_hover.jpg) repeat-x;}#top_menu li a {	font-size: 15pt;	color: white;}/* Container */#container {	margin: auto;	padding-top: 65px;	width: 1146px;}/* Left Menu */.left_menu_wrap {	float: left;}#left_menu {	margin-top: 3px;	width: 325px;	border: 1px solid #d7d7d7;}#left_menu a {	color: #797979;}#left_menu h1 {	padding-left: 9px;	color: #797979;	border-bottom: 1px solid #d7d7d7;	padding-bottom: 20px;	font-family: Tahoma, sans-serif;	font-size: 14pt;}#left_menu h1 span {	padding-left: 27px;	background: url(./img/nav_bg.jpg) no-repeat;	background-position: left;}#left_menu ul {	list-style: none;}#left_menu ul li {	margin-bottom: 12px;}#reklama {	margin: auto;	padding: 20px 0px 20px 0px;}/* Content */#content {	margin-top: 3px;	margin-left: 340px;	width: 810px;	min-height: 700px;}#first_news {	float: left;	margin-left: 5px;	margin-right: 10px;	margin-bottom: 20px;	width: 390px;	height: 500px;	background: #666;}#second_news {	float: right;	margin-left: 10px;	margin-right: 5px;	margin-bottom: 20px;	width: 390px;	height: 500px;	background: #666;}

npofopr · June 11, 2014

Поставьте overflow: hidden; для обертки этих дивов, тех что с float.

Или посмотрите, что такое clearfix

Segnava · June 11, 2014

Спасибо тебе большое) overflow: hidden; помогло)

klierik · June 12, 2014

и почитай как правильно задавать вопрос в подписи

Sign In

Background оболочки не растягивается

Question

Segnava

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Segnava

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information