HTML & CSS Positioning - html

Question

I have coded the layout below, but when tested the 'Login or Signup' link is not positioning to the right side of the page. Any help is appreciated.
HTML
<header>
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p
Login or Signup
</header>
CSS
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
a {
color: #333;
text-decoration: none;
}
h1, h2 {
font-weight: 300;
}
Desired Outcome

Answer 1

Here is a working solution:
DEMO
html
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
css
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
header a {
color: #333;
text-decoration: none;
float: right;
padding-top: 30px;
}
h1, h2 {
font-weight: 300;
}

Answer 2

First thing, please write html in correct way and write css with class name.
here is your answer :
HTML :
<header>
<h1>Heading</h1>
Login or Signup
<p>A clean, minimal, grid-based layout focusing attention on your work</p>
</header>
CSS :
* {
padding: 0;
margin: 0;
}
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px;
}
a {
color: #333;
text-decoration: none;
float: right;
}
h1, h2 {
font-weight: 300;
margin :0;
padding: 0;
}
header h1{
width: 70%;
display: inline-block;
}
header a{
width: 30%;
display: inline-block;
padding-top: 10px;
}
Demo Link

Answer 3

Some small changes. the H1 and p have full width so a must be below p. Change the css to
a {
color: #333;
text-decoration: none;
float: right;
margin-right: 70px;
}
p{width: 70%;float: left;}
h1, h2 {
font-weight: 300;
width: 70%;
float: left;
}
Will work fine.

Answer 4

First of all there is a missing > at the end of <p>...</p>
Then try this :
CSS
a
{
color: #333;
text-decoration: none;
display : block;
float : right;
}
HTML
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
And the jsFiddle http://jsfiddle.net/HxWNh/

Answer 5

<div class="wrapper" style="margin:auto; width:960px:">
<div class="header" style="height:80px;">
<div style="float:left">
<h1 style="float: left;">Heading</h1>
</div>
<div class="login" style="float:right">
Login or Signup
</div>
</div>
<div class="DisplayArea" style="float:left;">
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</div>
</div>
.wrapper{
margin:auto;
width:960px;
}
See if this helps...
i always find it easy to easy n convenient to position elements using .