It's maddening...
I'm working on a website and trying to create a header div that includes the site name, search bar, and sign in/log in buttons. I want the logo on the left, search bar in the center, and sign in/log in buttons on the right, stacked vertically. The logo and search should be centered vertically.
Here's the code I currently have:
#home {
position: absolute;
}
#search {
position: absolute;
left: 30%;
}
#search_box {
width: 500px;
}
#header {
position: relative;
height: 90px;
line-height: 90px;
background-color: burlywood;
color: beige;
padding: 10px;
float: top;
margin: auto;
border-style: groove;
}
#log_in {
float: right;
}
#sign_in {
float: right;
}<div id="header">
<div id="home">
<h1>HatSpace</h1>
</div>
<div id="search">
<form>
<input id="search_box" type="text" placeholder="Search the Website">
</form>
</div>
<div id="log_in">
<p>Log in</p>
</div>
<div id="sign_in">
<p>Sign in</p>
</div>
</div>After implementing Chheda's suggestions:
#header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: burlywood;
color: beige;
border-style: groove;
}
#register {
display: flex;
flex-direction: column;
}<div id="header">
<div>
<h1><a href="index.html"</a>HatSpace</h1>
</div>
<div id="register">
<form>
<input style = "width: 500px;" type="text" placeholder="Search the Website">
</form>
</div>
<div>
<div>
<p>Log in</p>
</div>
<div>
<p>Sign in</p>
</div>
</div>
</div>If I remove the href from the HatSpace element, it displays as desired. However, I need the href there. What am I missing?