CODEWITHSUNDEEP
htmlcss
Makopa
Makopa

Reputation: 107

How to align <div> elements perfectly?

I'm trying to mimic Facebook's homepage to enhance my skills, but I'm having a hard time trying to align the username and password box perfectly to each other, here is what it looks like:

my header picture

My HTML:

<body>
     <div id="top_banner">
         <div id="header">
              <h1>facebull</h1>
         </div>
         <div id="login_info">
             <div id="username_group">
                <label for="username_field">Email or Phone?</label>
                <input type="text" id="username_field">
             </div>
             <div id="password_group">
                <label for="password_field">Password</label>
                <input type="text" id="password_field">
                <label>Forgot account?</label>
             </div> 
        </div> 
    </div>

My CSS:

*{
    margin:0px;
    padding:0px;
}

input, label{
    display:block;
}

#top_banner{
    background-color:#3b5998;
    color: #fff;
    width:100%;
    height: 100px;
}

#header{
    line-height: 100px;
    position: absolute;
    margin-left: 100px;
    }

#password_group{
    margin-left: 80%;
}

#username_group{
     margin-left: 70%;
}

#container{
    background-color: #e9ebee;
}

I already tried using margin-top and line-height on #username_group but it doesn't work. Also, what are some ways I can make my code more efficient?

Upvotes: 4

Views: 68

Answers (3)

Michael Coker
Michael Coker

Reputation: 53674

Use flexbox on the parent to separate the sections (using justify-content: space-between) and align them vertically, then use flex on the login/password area to align and separate those elements. 

* {
  margin: 0px;
  padding: 0px;
}

input,
label {
  display: block;
}

#top_banner {
  background-color: #3b5998;
  color: #fff;
}

#container {
  background-color: #e9ebee;
}


/* SO edits */

#top_banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2em;
  box-sizing: border-box;
}

#login_info {
  display: flex;
  padding: 1em;
}

#username_group {
  margin-right: 1em;
}
<div id="top_banner">
  <div id="header">
    <h1>facebull</h1>
  </div>
  <div id="login_info">
    <div id="username_group">
      <label for="username_field">Email or Phone?</label>
      <input type="text" id="username_field">
    </div>
    <div id="password_group">
      <label for="password_field">Password</label>
      <input type="text" id="password_field">
      <label>Forgot account?</label>
    </div>
  </div>
</div>

Upvotes: 2

keja
keja

Reputation: 1363

You should look into "float", instead of using margin to move the divs

#password_group{
    margin-left: 80%;
}

#username_group{
     margin-left: 70%;
}

replace that with 

#login_info div {
  float: left;
}

then you can align the #login_info with float right etc.

Upvotes: 1

Lukas Niestrat
Lukas Niestrat

Reputation: 755

You can add 'float: right' to you #username_group and #password_group. This

Upvotes: 1

Related Questions