László Vaszi László Vaszi - 6 months ago 16
HTML Question

Header content wrapped into #header but #header appears empty

The content of my header is wrapped into #header, but when I set border to display the structure it shows that my #header's content comes after the #header itself. What can be the problem? Here is my code:



#header {
border:1px solid red;
max-height:150px;
}

#logo {
border:1px solid red;
display:inline-block;
float:left;
}

#navbar {
border:1px solid red;
display:inline-block;
float:right;
}

#logo_img {
max-height:50px;
}

.nav li {
display:inline;
}

<div id="header">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="header-left clearfix">
<div id="logo" class="logo">
<a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
</div>
</div>
</div>
<div class="col-md-9">
<div class="header-right clearfix">
<div id="navbar">
<div class="container-fluid">
<ul class="nav">
<li><a href="#banner">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




Answer

If you are using floats you can use clearfix for the header to make it expand to the content size like this:

#header {
  border:1px solid red;
  max-height:150px;
}

#logo {
  border:1px solid red;
  display:inline-block;
  float:left;
}

#navbar {
  border:1px solid red;
  display:inline-block;
  float:right;
}

#logo_img {
  max-height:50px;
}

.nav li {
  display:inline;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}
<div id="header" class="clearfix">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="header-left clearfix">
          <div id="logo" class="logo">
            <a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="header-right clearfix">
          <div id="navbar">
            <div class="container-fluid">
              <ul class="nav">
                <li><a href="#banner">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#footer">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

EDIT:

When you include your bootstrap stylesheet the menu will become larger and thus you may want to remove the max-height from #header for it to be able to extend to the full height. Probably you have some other purposes for the menu so it won't be extended/open all the time.