Search code examples
htmlcssresponsive-designheadermedia-queries

How to make the header with the logo on the left and the navigation on the right?

I'd want to make the header to my web page where the logo would be on the left hand side and the horizontal navigation bar on the right hand side.

The problem is that whenever I shrink the browser window the navigation bar goes below the border of the header container, thus violating the page's structure.

Like this:

Are there any solutions? I can only think of making the parent container Header accommodate its height to the child containers, but I don't know how to implement that. Or should I use the media queries somehow?

I wrote the following code. 

header {
  height: 100px;
  background-color: gray;
  background-image: url('img/background.gif');
}
#logo {
  float: left;
}
nav {
  float: right;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
<header>
  <img id="logo" src="images/logo.png">
  <nav>
    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#services">Services</a>
      </li>
      <li><a href="#gallery">Gallery</a>
      </li>
      <li><a href="#blog">Blog</a>
      </li>
      <li><a href="#contacts">Contacts</a>
      </li>
    </ul>
  </nav>
</header>

Solution

  • You may use the flex model or min-height + overflow to deal with floatting elements. You can also use both together, float properties will be overidden by flex where supported. , 

    header {
  min-height: 100px;
  background-color: gray;
  background-image: url('img/background.gif');
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  overflow:hidden; /* for float if flex not supported */
}
#logo {
  float: left;
  /* to deal with flex */
  flex-shrink:0;
  margin:auto;/* or 0 or auto auto auto 0 or ... */
}
nav {
  float: right;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
    <header>
  <img id="logo" src="http://dummyimage.com/140x45&text=logo.png">
  <nav>
    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#services">Services</a>
      </li>
      <li><a href="#gallery">Gallery</a>
      </li>
      <li><a href="#blog">Blog</a>
      </li>
      <li><a href="#contacts">Contacts</a>
      </li>
    </ul>
  </nav>
</header>