Заголовок div высота не вычисляется, «clear fix» не работает?

Question

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

В моем заголовке отображается значение высоты 0, а не правильно вычисляется содержимое. Я немного почитал, и я понимаю, что это скорее всего плавающие элементы в навигации (в данном случае .desktoplinkitem).

Мой код заголовка выглядит следующим образом:

<div class="header videohead"> 
<div class="mobile-nav"> 
    <div class="mobile-link-container"> 
    <div class="mobile-links"> 

    <li class="linkitem"><a href="homepage">Video</a></li> 
    <li class="linkitem"><a href="stills">Stills</a></li> 
    <li class="linkitem"><a href="about">About</a></li> 
    <li class="linkitem"><a href="emaillink">Contact</a></li>       </div> 
    </div> 
    </div> 
    <div class="name logo">Name<br>Title</div> 
    <div class="right-nav"> 
    <button class="mobilemenu mobilemenu--htx"> 
    <span></span> 
    </button> 
    <div class="desktop-nav"> 
    <ul> 

    <li class="desktoplinkitem"><a href="email-link">Contact</a></li> 
    <li class="desktoplinkitem"><a href="about.php">About</a></li> 
    <li class="desktoplinkitem"><a href="link">Stills</a></li> 
    <li class="desktoplinkitem"><a href="home">Video</a></li>    </ul> 
    </div> 
</div> 
</div> 

CSS-стилизовано как:

.header { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 600; 
    flex: none; 
} 

.videohead { 
    display: inline-block; 
} 

.desktoplinkitem { 
    visibility: inherit; 
    color: inherit; 
    background: none !important; 
} 

.linkitem { 
    visibility: inherit; 
    color: #FFFFFF; 
    transform: scale(2, 2) translateX(-100px); 
    opacity: 0; 
} 

.right-nav { 
    position: absolute; 
    right: 0%; 
    padding: 35px; 
    color: #000000; 
    text-decoration: none; 
} 

.right-nav ul { 
    height: auto; 
    padding: 8px 0px; 
    margin: 0px; 
    float: right; 
} 

.right-nav li { 
    display: inline; 
    padding-top: 1em; 
    padding-bottom: 1em; 
    padding-left: 1em; 
    letter-spacing: 1px; 
    float: right; 
} 

Я пытался добавить clear fix взломать без результата (с помощью следующих):

.videohead:after { 
    content: " "; 
    display: table; 
    height: 0; 
    clear: both; 
    *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>'); 
} 

Страница видна here

Есть ли другой способ приблизиться к этому?

Answer 1

Устраняется удаление position: absolute; от .logo.

Ваш заголовок остается пустым, потому что каждый ребенок внутри него по-другому позиционируется как статическим, так и относительным.

Плавучих мог бы быть проблемой, если они были прямым потомком .header