CODEWITHSUNDEEP
htmlcssclearfix
hj8ag
hj8ag

Reputation: 305

header div height not calculating, 'clear fix' not working?

I'm currently doing a bit of a redesign on my site and have run into a slight issue regarding a header div element and some child elements with a float: attribute.

My header is showing a height value of 0, and not calculating the contents itself correctly. I've done a bit of reading around and I understand that this is most likely down to floating elements within the navigation (in this case .desktoplinkitem).

My header code is as follows:

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

The CSS is styled like:

.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've tried to add a clear fix hack with no result (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>' );
}

The page can be seen here

Is there another way to approach this?

Upvotes: 0

Views: 1473

Answers (1)

Wart Claes
Wart Claes

Reputation: 233

It is fixed by removing the position: absolute; from .logo.

You header stays empty because every child inside it has been positioned in a different way the either static or relative.

The floating could have been the issue if they were a direct child of .header

Upvotes: 1

Related Questions