swipeales swipeales - 5 months ago 8
CSS Question

Adding login to right top corner

I'd like to add login to right top corner, just like most forums have. I split my container on left/right, but the right side wouldn't work.

<div id="header">
<div class="container">
<div class="leftbox">
LOGO image
</div>
<div class="rightbox">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>

<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>

<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

</div>


css

body {
background-color: #E3E3E3;
font-size: 12px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: #4f4f4f;
font-family: "BebasNeue", sans-serif;
margin: 0;
font-weight: normal;
}

/* header/navbar*/

#header{
background-color: #2C2C2C;
color: #FFFFFF;
padding-top: 30px;
}

#header.leftbox{
float:left;
display: inline;
}

#header.rightbox{
float:right;
display: inline;
width: 200px;
}


here is my jsfiddle: https://jsfiddle.net/otj12jno/

Answer

You've made one mistake. There should be a space between id and class in css.

#header.leftbox{}

This code calls element which id="header" and class="leftbox"

#header .leftbox{}

This code calls element which class="leftbox" and his parent (or grandparent etc.) has id="header"