My nav bar doesn't span vertically to fit the parent div. Why?

Question

I'm using a child theme on wordpress and for some reason, the nav bar doesn't span to fit the div "header". I tried height: 100% for all the parts.

.main-nav {
    float: right;
    border: none;
    position: relative;
    margin: 0px auto;
    padding: 0px;
    clear: none;
    height: 100%;
}
.menu, .menu ul {
    text-decoration: none;
    text-shadow: 0px;
    margin: 0px auto;
    padding: 0px;
    clear: none;
    height: 100%;
}
.menu li a:link {
    border: none;
    color: #353535;
    background-color: white;
    text-transform: lowercase;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight: normal;
    font-size: 15px;
    background-image: none;
}
.menu li a:visited {
    border: none;
    color: #353535;
    background-color: white;
    text-transform: lowercase;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight: normal;
    font-size: 15px;
    background-image: none;
}
.menu li a:hover {
    border: none;
    color: DeepPink;
    text-transform: lowercase;
    background-color: white;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight: normal;
    font-size: 15px;
    background-image: none;
}
.menu li a:active {
    border: none;
    color: DeepSkyBlue;
    text-transform: lowercase;
    background-color: white;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight:normal;
    font-size: 15px;
    background-image: none;
}

As per request, the HTML:

<div id="header">       
<div id="logo">
    <a href="http://acjdesigns.com/"><img src="http://acjdesigns.com/wp-content/uploads/2014/01/cropped-copy-Logo-012.png" width="250" height="54" alt="ACJ Designs"/></a>
    </div><!-- end of #logo -->
    <div class="main-nav">
      <ul class="menu">
        <li class="current_page_item"><a href="http://acjdesigns.com/">Home</a></li>
        <li class="page_item page-item-34"><a href="http://acjdesigns.com/bio">bio</a></li>
        <li class="page_item page-item-39"><a href="http://acjdesigns.com/graphics">graphics</a></li>
        <li class="page_item page-item-101"><a href="http://acjdesigns.com/photography-2">photography</a></li>
        <li class="page_item page-item-41"><a href="http://acjdesigns.com/other-works">other works</a></li>
   </ul>
</div>
</div><!-- end of #header -->

I don't have my header div set to a height, so maybe that's the problem? Any help would be great. Thanks ahead of time!

I'm guessing you will need a clearfix for your header element. The likely culprit is the float on .main-nav, causing the parent div to lose its height. — Kyle Shevlin, Mar 06 '14 at 19:44
as you say, if header has no height set in css , then 100% for child means 100% of nothing to refer — G-Cyrillus, Mar 06 '14 at 19:46
_Naturally_ heights set in percent work only when the parent element has an explicit height set itself – otherwise that would lead to unsolvable equations: When the height of the parent depends on its content, but that of the child is a percentage of the parent’s height … there’s no way of solving that situation. — CBroe, Mar 06 '14 at 20:00

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

you have two general aproaches: set a height:100%; on all elements down from body

html {height:100%;}
body {height:100%;}
...  
#header {height:100%;}

OR

Use absolute positioning

#header{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 400px;
}
/* you must now move your content out of the way of the header, or it will sit on top */

#content{
  margin-left: 420px;
}

edited May 23 '17 at 12:20

Community

1
1

answered Apr 05 '14 at 00:07

actual_kangaroo

5,971
2
31
45

My nav bar doesn't span vertically to fit the parent div. Why?

1 Answers1