Good evening. Now I make up one page and I need to align the blocks in one line, I use for this float: left; Everything would be fine, but my blocks merge due to the fact that I previously used float: left for ul, li. But why do they merge? It seems that I even carried them into a separate div block.

CSS and 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>

  • .mini-menu: after {display: table; clear: both; content: '';} use this construction and give it to the block after which the new block starts with float: left, if I added to this block correctly or to what you need - Lieutenant Jim Dangle
  • Something does not work ... :( - Konark
  • which blocks have questions? - Lieutenant Jim Dangle
  • From main and below. - Konark
  • try to give the shell with float'om display: table; clear: both; without after, otherwise you’ll get half out there - Lieutenant Jim Dangle

1 answer 1

Try to give the shell with float 'om display:table; clear:both; display:table; clear:both; and this construction :after{display: table; clear:both; content:' ';} :after{display: table; clear:both; content:' ';} :after{display: table; clear:both; content:' ';} if you want to clear wraps.