在div内排列元素

Question

this is driving me insane...

Basically, I have this website and I want it to have header div that contains the name of the website, search bar, and sign in/log in buttons. I want the logo to be on the left, search bar in the middle, and sign in and log in on the right, one on top of each other. The logo and search should be in the middle vertically.

here's what I have in code:

 #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> 

This is what I get after Chheda's code

 #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 you remove href from HatSpace element, then it will look like exactly what I want to, but I need href there, what is wrong with this!!!

Answer 1

Are you looking for something like this ?

 #header { display: flex; justify-content: space-between; align-items: center; } #register { display: flex; flex-direction: column; } 

 <div id="header"> <div id="home"> <h1>HatSpace</h1> </div> <div id="register"> <div id="log_in"> <p>Log in</p> </div> <div id="sign_in"> <p>Sign in</p> </div> </div> <div id="search"> <form> <input id="search_box" type="text" placeholder="Search the Website"> </form> </div> </div> 

Answer 2

First, put the "Log in" and "Sign in" texts into the same container (eg <div id="log_in"> </div> ). Remove the line-height:90px from #header (I believe you added it to move the search box). Instead, add margin-top:30px to #search . If you needed the line-height for #home , too, just add it there.

Hope this matches your needs ;)