Why doesn't the div 's height change when there is a link in it? The link itself starts in a div and, because of its height, goes beyond its limits.

 .list-menu a:link, a:visited { background-color: #f44336; color: white; padding: 10px 25px; text-align: center; text-decoration: none; } .list-menu a:hover, a:active { background-color: red; } #navigation { clear:both; padding-top:10px; border-bottom: 1px solid maroon; background-color:#F0F0F0; } .list-menu { width:90%; float:left; display:inline-block; } .search { width:10%; float:left; } 
 <div id="navigation"> <div class="list-menu"> <a href="#">О нас</a> <a href="#">Регистрация</a> </div> <div class="search"> <form action="search.php"> <input type="text" name="search" placeholder="Поиск"> </form> </div> </div>

  • .list-menu a:link, a:visited - it doesn't work like this - Qwertiy ♦

2 answers 2

You have several mistakes at once.

First, you did not clear the stream after the float elements. To clear the stream, apply the following styles:

  #navigation { overflow: hidden; }

Or:

  #navigation:after { content: ''; display: block; clear: both; }

Secondly, the links need to put down the display: inline-block; property display: inline-block; so that they have height and can expand the parent unit:

  a { display: inline-block; }

Full example:

 .list-menu a:link, a:visited { background-color: #f44336; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } .list-menu a:hover, a:active { background-color: red; } #navigation { clear:both; padding-top:10px; border-bottom: 1px solid maroon; background-color:#F0F0F0; } #navigation:after { content: ''; display: block; clear: both; } .list-menu { width:90%; float:left; display:inline-block; } .search { width:10%; float:left; } 
 <div id="navigation"> <div class="list-menu"> <a href="#">О нас</a> <a href="#">Регистрация</a> </div> <div class="search"> <form action="search.php"> <input type="text" name="search" placeholder="Поиск"> </form> </div> </div>

  • Doesn't clear control the flow of elements? does overflow only display what is inside its element? I do not understand how it works. The code of course now works as I wanted. Thank! Now only one more problem remains, when the links in the block between them indent, which is not the case with the usual placement of links. How can you overcome it? - Dmitriy
  • the space was removed using margin-left: -5px; how correct it is. - Dmitriy
  • @ Dmitry space can be removed through the methods listed in this question: ru.stackoverflow.com/questions/609992/… - Vadizar
  • Thank! About overflow figured out, found the same example on w3. - Dmitriy

add display:block;

  • does not help, the links to the list are lined up and stretched to the width of the whole "list-menu" - Dmitry