I'm struggling to line up the divisions within the header element instead of having them stack on top of each other. My goal is to have the logo float left, while the social media icons and search bar float right. Additionally, I want the magnifying glass icon in the search bar to align with the text input field.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Maj's Php Project 2022</title>
<!-- Jquery Link -->
<!-- CSS Stylesheet Link -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Links -->
<!-- Metadata Information -->
<!-- Website Comment Information -->
</head>
<body>
<div id="wrapper">
<header>
<div id="logo">
</div>
<div id="social-media-icons">
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
</div>
<div id="search-bar">
<img src="img/search.png" width="25px" height="25px" />
<form action="#" method="POST">
<input type="text" placeholder="Search" name="search" id="search" />
<input type="submit" value="GO" name="submit" id="submit" />
</form>
</div>
<nav>
<ul>
<li><a href="">HOME</a></li> |
<li><a href="">ABOUT</a></li> |
<li><a href="">SERVICES</a></li> |
<li><a href="">BLOG</a></li> |
<li><a href="">CONTACT</a></li> |
<li><a href="">LOGIN</a></li>
</ul>
</nav>
</header>
And here's the CSS code:
/* GLOBALS */
/* ELEMENT */
body {
background-color: white;
}
header {
width: 960px;
background-color: #336699;
border-radius: 15px;
padding: 10px;
}
main {
background-color: #33FF99;
border-radius: 15px;
padding: 10px;
color: #330099;
}
li {
display: inline;
padding: 5%;
}
li > a {
text-decoration:none;
color: #33CC99;
}
li > a:hover {
color: #330066;
}
footer {
background-color: #336699;
border-radius: 15px;
padding: 10px;
color: #33CC99;
}
header {
display: inline-block;
}
/* IDS */
#wrapper {
border-radius: 15px;
width: 960px;
clear: both;
margin: 0 auto;
padding-top: 5px;
}
#logo {
width: 100px;
height: 100px;
margin: 5px;
margin-top: 5px;
background-color: white;
border-radius: 15px;
}
#search-bar {
display: inline;
float: right;
}
#social-media-icons {
float: right;
}
I've tried floating the elements to get them to align correctly, but it's not working. Any advice on what I might be missing would be greatly appreciated. Thank you!