My problem is that I dont want that big gap to the left of the article that is on the right.
Here is the HTML:
Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset=UTF-8>
<title>LetsDevelop</title>
<link href="screen.css" rel="stylesheet" />
</head>
<article id="vid">
<iframe width="560" height="315" src="http://www.youtube.com/embed/Cm9dQacqLUo" frameborder="0" allowfullscreen></iframe>
</article>
<div class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://www.quackit.com/css/">CSS</a>
<a href="http://www.quackit.com/html/">HTML</a>
<a href="http://www.quackit.com/javascript/">JavaScript</a>
<a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
<a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
</div>
<article class="right" id="artright">
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
</article>
<article class="left" id="main">
<h1>Welcome to my page</h1>
<p>This is an example of a home page</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
</article>
<article class="left" id="main">
<h1>Another Article</h1>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
</article>
</body>
<footer><a href="mailto:developerinfinity@gmail.com?Subject=COD%20CLAN%20SITE">Developer Infinity</a></footer>
</html>
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset=UTF-8>
<title>LetsDevelop</title>
<style type="text/css">
/* Screen CSS */
body
{
background-image:url('wallpaper.jpg'); /* image courtesy of digitalrevolutions.biz */
background-repeat:no-repeat;
background-attachment: fixed;
}
#main
{
background-color: grey;
border-radius: 20px;
padding-left: 1%;
padding-right: 1%;
margin-top: 1%;
width: 45%;
float: left;
}
#vid { float:right;
margin-top: 10em;
margin-left: 4em;
}
div.floating-menu
{
position:fixed;
top: 20px;
right: 50px;
background:grey;
width:150px;
z-index:100;
text-align:right;
}
div.floating-menu a, div.floating-menu h3
{
display:block;
margin:0 0.5em;
text-decoration:none;
}
#artright
{
background-color: grey;
border-radius: 20px;
padding-left: 1%;
padding-right: 1%;
margin-top: 1%;
width: 45%;
float: right;
}
#article2
{
clear: both;
float: left;
background-color: grey;
border-radius: 20px;
padding-left: 1%;
padding-right: 1%;
margin-top: 1%;
width: 45%;
}
a
{
color: black;
text-decoration: none;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
footer {background-color:grey;
text-align: center;
margin-top: 5px;
clear: both;}
</style>
</head>
<body>
<article id="main">
<h1>Welcome to my page</h1>
<p>This is an example of a home page</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
</article>
<div class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://www.quackit.com/css/">CSS</a>
<a href="http://www.quackit.com/html/">HTML</a>
<a href="http://www.quackit.com/javascript/">JavaScript</a>
<a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
<a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
</div>
<article id="vid">
<iframe width="560" height="315" src="http://www.youtube.com/embed/Cm9dQacqLUo" frameborder="0" allowfullscreen></iframe>
</article>
<article id="artright">
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
</article>
<article id="article2">
<h1>Another Article</h1>
<p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
</article>
<footer><a href="mailto:developerinfinity@gmail.com?Subject=COD%20CLAN%20SITE">Developer Infinity</a></footer>
</body>
</html>
I hope this helps you.
There were many errors such as your <footer> being outside the closing </body> tag. Also, no opening <body> tag. I've also changed the code slightly, put some elements above others and moved things around. I noticed you were applying the same ID to a second element on the page, which is not allowed. This is why I created the article2 ID and pretty much gave it the same styles apart from the clear: both declaration.
Hello logepoge1,
It's always easier if you call an element by the id/class you've given it. The vague "article on the right" description just confuses people. Remember, you've been working with and looking at this code for hours and this is the first time for anyone that would like to help you.
That gap in your text is caused by the 51% left margin you put on #artright .right To fix that, you should float that element instead. We use floats to put elements beside other elements.
Once you remove that margin and float it right, #main .left drops because floats need to come first in your markup.
Before you post, read our: 
