Tjatte Tjatte - 1 month ago 12
CSS Question

Elements arent floating correctly

i am trying to code a simple website, but i am stuck at the header part at the moment. For no reason, my elements doesnt 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).

I appreciate any kind of help.



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




Answer

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