Elements aren't floating correctly

Question

I am trying to code a simple website, but I am stuck at the header part at the moment. For no reason, my elements doesn't flow as expected. The div "header_h" has to float to the left and the nav has to float to the right. But whenever I float one of the elements, its going out of the header. (Example: http://www.youscreen.de/yuphdkhlj00.jpg). When I float both at the same time like in the code, it looks like this: http://www.youscreen.de/isiqgladz04.jpg

This is how it has to look like: http://www.youscreen.de/sdbzjigvs77.jpg (created via height in the header, but thats not the solution I guess).

*{
  margin: 0;
  padding: 0;
}

#kopfbereich{
  width: 100%;
  background-color: #34495e;
}

header{
  display: block;
  width: 1000px;
  margin: 0px auto;
}

#header_h{
  float: left;
}

nav{
  float: right;
}

nav ul{
  list-style-type: none;
}

nav ul li{
  display: inline-block;
}

<html>
  <head>
    <title>Design #1</title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="kopfbereich">
      <header>
        <div id="header_h">
          <h1>Fancy</h1>
          <h2>Testsite</h2>
        </div>
        <nav>
          <ul>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
          </ul>
        </nav>
      </header>
    </div>
  </body>
</html>

this looks like a [clearfix](http://stackoverflow.com/questions/8554043/what-is-a-clearfix) issue — Pevara, Oct 26 '16 at 16:56

score 1 · Accepted Answer · answered Oct 26 '16 at 16:59

This is known float problem.Apply clearfix to header it should work

Check this snippet

*{
  margin: 0;
  padding: 0;
}

#kopfbereich{
  width: 100%;
  background-color: #34495e;
}

header{
  display: block;
  width: 1000px;
  margin: 0px auto;
}
.clearfix::after{
  display:table;
  visibility:hidden;
  clear:both;
  content:"";
}
#header_h{
  float: left;
}

nav{
  float: right;
}

nav ul{
  list-style-type: none;
}

nav ul li{
  display: inline-block;
}

    <div id="kopfbereich">
      <header class="clearfix">
        <div id="header_h">
          <h1>Fancy</h1>
          <h2>Testsite</h2>
        </div>
        <nav>
          <ul>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
          </ul>
        </nav>
      </header>
    </div>

Here codepen

Hope this helps

score 0 · Answer 2 · answered Oct 26 '16 at 17:49

i don't think that is the right answer to this question but only a working solution! i guess your problem is just because you have set to width:100%; and header to width:1000px; so whatever the window(body tag) width is kopfbereich will have it too! but regardless to the window width the header is always 1000px your problem only appears to be with the times that window has a width less than 1000px and only colors that limited area but the menu links (nav) are floated at the right end of the 1000px header .. but everything looks fine on a window with width more than 1000px.

so for this very example i think you should take the background-color from kopfbereich and give it to header and u need to set header's height to something too.. like

*{
  margin: 0;
  padding: 0;
}

#kopfbereich{
  width: 100%;

}

header{
  display: block;
  width: 1000px;
  height:100px;
  background-color: #34495e;
  margin: 0px auto;
}

#header_h{
  float: left;
}

nav{
  float: right;
}

nav ul{
  list-style-type: none;
}

nav ul li{
  display: inline-block;
}

<html>
  <head>
    <title>Design #1</title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="kopfbereich">
      <header>
        <div id="header_h">
          <h1>Fancy</h1>
          <h2>Testsite</h2>
        </div>
        <nav>
          <ul>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
          </ul>
        </nav>
      </header>
    </div>
  </body>
</html>

Elements aren't floating correctly

2 Answers2