I'm currently facing a challenge in coding a basic website, particularly with the header section. The elements are not aligning as expected and seem to be flowing incorrectly. I want the "header_h" div to float to the left and the nav to float to the right. However, whenever I apply a float property to one of the elements, it goes out of the header container (Example: http://www.example.com/image1.jpg). When I try floating both elements at the same time as shown in the code snippet, the layout appears like this: http://www.example.com/image2.jpg
The desired look should resemble this: http://www.example.com/image3.jpg (achieved by setting height in the header, but that may not be the ideal solution).
*{
margin: 0;
padding: 0;
}
#kopfbereich{
width: 100%;
background-color: #34495e;
}
header{
display: block;
width: 1000px;
margin: 0 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>