I am facing an issue with two divs on my webpage. The first div is a header containing a logo image and a search input field. The second div is meant for displaying navigation links in a horizontal row.
The problem I'm encountering is that the second div overlaps with the first div, taking up all the space between the logo image and the search box.
Below are the HTML codes for the two divs:
<div id="container">
<div id="logo">
<img src="HeaderLogo.jpg" alt="logo">
</div>
<div id="searchboxcontainer">
<form action="search.php" method="post">
<input type="text" name="searchterm" id="searchbox" />
<input type="submit" name="search" value="Search" id="searchsubmit" />
</form>
</div>
</div>
<div id="navbar">
</div>Here is the CSS code being used:
#logo {
width:30%;
float:left;
margin-left:50px;
}
#searchboxcontainer {
background-color:#A3E0FF;
width:30%;
float:right;
margin-right:50px;
margin-top:60px;
padding:15px;
}
#searchsubmit {
background-color:#19A3D1;
}
#navbar {
width:100%;
background-color:#CACABC;
height:60px;
}