I'm in the process of revamping my website and have encountered an issue with a header div element and some child elements that are floated.
The problem is that my header is displaying a height value of 0 and not correctly calculating its content. Based on my research, it seems that this issue is likely caused by floating elements within the navigation (specifically .desktoplinkitem).
This is the code for my header:
<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>
Here is the CSS styling:
.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;
}
I attempted to add a clear fix hack, but it didn't work (using the following):
.videohead:after {
content: " ";
display: table;
height: 0;
clear: both;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
You can view the page here
Is there an alternative way to resolve this issue?