swipeales swipeales - 1 year ago 73
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 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">
<input type="checkbox" value="remember-me"> Remember me
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>



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

h6 {
color: #4f4f4f;
font-family: "BebasNeue", sans-serif;
margin: 0;
font-weight: normal;

/* header/navbar*/

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

display: inline;

display: inline;
width: 200px;

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

Answer Source

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


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"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download