Блоки div сливаются в одно

340

26 ноября 2016, 18:47

Добрый вечер. Сейчас верстаю одну страницу и мне нужно выровнять блоки в одну строку, использую я для этого float: left; Все бы хорошо, но у меня блоки сливаются из-за того, что я ранее использовал float:left для ul, li. Но, почему они сливаются? Вроде бы я даже вынес их в отдельный блок div.

CSS и HTML:

@import url(reset.css); 
 
@font-face { 
    font-family: PTSans NarrowBold; /* Имя шрифта */ 
    src: url(../font/pt-sans-narrow-bold.ttf); /* Путь к файлу со шрифтом */ 
   } 
 
body{ 
	text-transform: uppercase; 
	background: url(../img/price-background.png); 
} 
 
header{ 
	width: 100%; 
	height: 75px; 
	background-color: #000000; 
} 
 
.top-menu-list{ 
	height: 70px; 
	width: 940px; 
	margin: 0 auto; 
} 
 
.top-menu-list ul li{ 
	float: left; 
	margin: 0 auto; 
	text-decoration: none; 
	margin-right: 45px; 
	font-family: PTSans NarrowBold; 
	font-size: 16px; 
	color: #ffffff; 
} 
 
.top-menu-list ul{ 
	padding-top: 29px; 
	padding-left: 20px; 
} 
 
.top-menu-list .menu-exit { 
	float: right; 
	background: url(../img/enter.png) no-repeat; 
} 
 
.top-menu-list .menu-exit a{ 
	padding-left: 25px; 
	text-decoration: none; 
	color: #ffffff; 
} 
 
.top-menu-list a{ 
	text-decoration: none; 
	color: #ffffff; 
} 
 
.top-menu-list a:hover{ 
	text-decoration: underline; 
} 
 
main{ 
	display: block; 
	margin: 0 auto; 
	width: 940px; 
	height: 795px; 
} 
 
.mini-menu{ 
	height: 63px; 
	padding-top: 59px; 
	font-family: PTSans NarrowBold; 
	color: #000000; 
} 
 
.mini-menu h1{ 
	font-size: 30px; 
	padding-bottom: 29px; 
} 
 
.mini-menu ul li{ 
	float: left; 
	font-size: 14px; 
} 
 
.mini-menu a{ 
	text-decoration: none; 
	color: #000000; 
} 
 
.mini-menu a:hover{ 
	text-decoration: underline; 
} 
 
.mini-menu .price-li{ 
	list-style-image: url(../img/price-rhomb.png); 
	margin-left: 35px; 
	padding-left: 10px; 
} 
 
.title-main .line-left{ 
	margin-top: 79px; 
	background: url(../img/price-line.png) no-repeat; 
	width: 160px; 
	height: 2px; 
	padding-right: 25px; 
	float:left; 
} 
 
.title-main h2{ 
	float: left; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Price</title> 
	<link rel="stylesheet" type="text/css" href="style/price.css"> 
	<link rel="stylesheet" type="text/css" href="style/log.css"> 
</head> 
<body> 
	<header> 
		<div class="top-menu-list"> 
			<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 class="menu-exit"><a href="#dialog" name="modal">Вход</a></li> 
			</ul> 
		</div> 
	</header> 
	<main role="main"> 
		<div class="mini-menu"> 
			<h1>Barbershop Borodinski - Прайс-лист</h1> 
			<ul> 
				<li><a href="#">Главная</a></li> 
				<li class="price-li"><a href="#">Прайс-лист</a></li> 
			</ul> 
		</div> 
		<div style="clear: both;"></div> 
		<div class="title-main"> 
			<div class="line-left"></div> 
			<h2>Истинно мужская классика</h2> 
			<div class="line-right"></div> 
		</div> 
	</main> 
</body> 
</html>

Answer 1

Попробуй дать оболочке с float'om display:table; clear:both; и такую конструкцию :after{display: table; clear:both; content:' ';} , если нужно очистить обтекания.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как могу добавить font-face с .ttf (scss)

Пытался добавить файлttf и связывать с ним

279

CSS

Выравнивание текста и иконки

Верстаю кнопку с иконкойКак обычно иконка находится слева, следом идёт текст

310

CSS

Ссылки меняют цвет после размещения на хостинге

Помогите понять причину сего поведения ссылок: При верстке на локальной машине, ссылки были белыми, как и прописано в CSSПосле размещения на хостинге...

277

CSS

Как переопределить бутерброд-меню в bootstrap под другое разрешение?

В меню сделанном на bootstrap и меня много пунктов меню и при определенном разрешении экрана, они сползают на 2оу строчку - фидлКак сделать так,...

553