Hello. I'm kind of new to creating websites. I can read and understand quite a bit and can edit some. Most of the time I have to look things up and then edit.

I'm having a big problem right now with adjusting my layout to fit different screen sizes properly. I have tried several times to fix it, yet have had no luck.

Here is the code:
Code:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>

<title>{Title}</title>

<meta name="description" content="{MetaDescription}" />

<meta name="image:Background" content="" />
<meta name="image:Sidebar" content="" />
<meta name="font:Body" content="Helvetica"/>

<meta name="image:SlideImage01" content="" />
<meta name="image:SlideImage02" content="" />
<meta name="image:SlideImage03" content="" />
<meta name="image:SlideImage04" content="" />

<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="/rss" />

<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:regular,italic,bold' rel='stylesheet' type='text/css'>

<script>
$(document).ready(function(){
$(".perma").hide();
$(".entry").mouseenter(function () {
$(".perma", this).slideDown("fast, 0.3");
});
$(".entry").mouseleave(function () {
$(".perma", this).slideUp("fast, 0.3");
});
});
</script>

<style type="text/css">


body {background-color:#f9fafb; color:#333333; font-family:{font:Body}; font-size:11px; width:55%; height:100%; margin:0; padding:0;}

img {border:0;}
a {text-decoration:none; color:#465b6d;}
a:hover {color:#334451;}
h1 {font-size:40px; margin:0 0 10px; font-weight:normal;}
ol, ul {margin:3px 0 3px -15px;}
blockquote {margin:-3px 0 0 5px; padding:0 0 0 10px; border-left:solid 2px #333333;}
pre {background-color:#e1e8f0; padding:3px 5px 4px; border-left:solid 3px #465b6d; font-size:11px; line-height:100%; text-align:left;}
pre span.highlight {background-color:#fff000;}
h2 {font-family:'Old Standard TT'; font-style:italic; font-weight:normal; font-size:20px; line-height:20px;}
h3 {font-size:11px; font-weight:normal;}
h4 {font-size:11px; font-weight:normal; text-align:center; padding-top:10px;}
h3 img, h4 img {position:relative; top:1px;}
.clear {clear:both;}

.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}

a, a:hover {-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}

.entry{margin-bottom:20px; width:100%;}
.entry img{max-width:100%}
.perma{margin-top:10px; text-align:center; opacity:0.8;}
.perma a{opacity:0.5;}

#left {height:100%; min-width:466px; background-color:#333333; position:fixed; left:0; top:0; box-shadow:0 0 10px black; color:white; z-index:2;}
#left.index {width:40%;}
#left.perma {width:60%;}
#left #dita {height:100%; width:auto; position:absolute; right:0; z-index:1;}

#art {width:100%; position:absolute; bottom:0; z-index:5; background-color:rgba(0,0,0,0.5); margin-bottom:20px; padding:20px 0;}
#left.index #slideshow {width:406px; margin-left:30px; float:left;}
#left.perma #slideshow {width:406px; margin:auto;}
#slideshow img {width:400px; height:229px; border:solid 3px #f9fafb;}
#left.index #list {float:left;}
#left.perma #list {width:406px; margin:auto;}
#list {font-family:Times, Times New Roman; letter-spacing:1px; text-transform:uppercase; font-size:10px; color:white; font-size:12px;}
#list a {text-decoration:none; color:white;}
#list a:hover {text-decoration:underline; color:white;}
#list ul {list-style-type:none;}
#left.index #list ul {margin-left:-12px; margin-bottom:-5px;}
#left.perma #list ul {margin-left:-40px; margin-bottom:-15px;}
#list li {white-space:nowrap;}


#content {word-wrap:break-word; float:right; text-align:justify; padding-bottom 40px; min-width:250px;}
#content.index {width:40%;}
#content.perma {width:60%;}
#content img {max-width:100%;}

#header {padding:40px 50% 40px; margin:auto; min-width:700px;}
#header a, #header a:hover {color:#333333;}
#header #title {text-transform:uppercase; font-family:'Old Standard TT'; -webkit-text-stroke: 1px transparent; text-align:center; line-height:50px; font-size:60px; margin:15px 0px 10px 0px;}
#header #links {width:100%; text-align:center; border-style:solid; border-color:#333333; border-width:1px 0; margin-top:10px;}
#header #links td {padding:3px 0;}

#post {padding:40px 50% 40px; margin:auto; max-width:700px;}
#post a {text-decoration:underline;}

#post .photo {border:solid 6px #465b6d;}
#post .photo img {display:block; width:100%;}
#post .photoset, #post .video {margin:0 auto 10px; border:solid 6px #465b6d; background-color:#465b6d;}
#post .photoset {border-bottom-width:0;}
#content.index #post .photoset, #content.index #post .video {width:500px;}
#content.perma #post .photoset, #content.perma #post .video {width:700px;}
.audio{overflow:hidden;}
.audio img{float:left; width:50px !important; height:50px !important;
margin-right:15px; margin-bottom:10px;}
.player{margin-left:65px; width:100%; background:#000;}
#post .question {background-color:#e1e8f0; padding:15px 20px;}
#post .question img {float:left; margin:0 10px 2px 0; border:solid 3px #465b6d; width:48px; height:48px;}
#post .question h1 {margin-bottom:6px;}
#post h1.link {text-align:center;}

#footer {margin-top:20px;}
#footer a {text-decoration:none;}
#footer .permalink {text-align:center;}
#footer .permalink img {position:relative; top:1px;}
#postdivider {background-color:#333333; height:1px; width:62%;}
#content.index #postdivider {margin:10px auto 60px;}
#content.perma #postdivider {margin:10px auto 10px;}
#notecontainer {margin-top:50px;}
#notecontainer ol {list-style-type:none; margin:0; padding:0;}
#notecontainer li {margin-bottom:4px;}
#notecontainer img.avatar {width:16px; height:16px; margin-right:10px; position:relative; top:3px; border:solid 1px #465b6d;}
#notecontainer blockquote {margin:3px 0 0 35px;}
#pagination {text-align:center; margin-top:-20px;}
#pagination img {position:relative; top:1px;}

#commissions ul {margin-top:-10px;}
#commissions blockquote {margin:-10px 0 0 15px;}
#commissions #postdivider {margin-top:20px!important;}

#toTop {display:none; text-decoration:none; position:fixed; bottom:20px; right:20px; overflow:hidden; width:30px; height:40px; border:none; text-indent:-999px; background:url(http://static.tumblr.com/fiton9k/6eglfx82y/totop.png) no-repeat left top; z-index:3000;
}

#toTopHover {background:url(http://static.tumblr.com/fiton9k/6eglfx82y/totop.png) no-repeat left -40px; width:30px; height:40px; display:block; overflow:hidden; float:left; opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
outline:none;
}

iframe#tumblr_controls {right:3px!important; position:fixed!important;}



</style>

<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>

<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({ easingType: 'easeOutQuart' });

});


</script>

<script language="JavaScript">
<!--

/*
Script by FPMC at http://jsarchive.8m.com
Submitted to JavaScript Kit (http://javascriptkit.com)
For this and 400+ free scripts, visit http://javascriptkit.com
*/

//set image paths
src = [
"{image:SlideImage01}", //01
"{image:SlideImage02}", //02
"{image:SlideImage03}", //03
"{image:SlideImage04}", //04
]

//set corresponding urls
url = [
"", //01
"http://", //02
"http://", //03
"http://", //04
]

//set duration for each image
duration = 6;

//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->



</script>

<script type="text/javascript" src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=f4f460f868a53413b09b87ef1baa4345"></script>
<meta http-equiv="x-dns-prefetch-control" content="off"/>


<meta name="if:Infinite Scroll" content="0">


</head>
<body style="min-width:760px;">

<div id="left" class="index">
<img id="dita" src="{image:Background}" />

<div id="art">
<div id="slideshow">
<a href="">
<img name="Ad_Image" src="{image:Sidebar}" border=0>
</a>


<!--This free script provided by javascriptkit.com-->

    
</div> <!--slideshow-->

<div id="list"><br><br><br><br><br>
<ul>
<li>Δ<a href=""> link 1</a></li>
<li>Δ<a href=""> link 2</a></li>
<li>Δ<a href=""> link 3</a></li>
<li>Δ<a href=""> link 4</a></li>
</ul>
</div> <!--list-->
<br class="clear" />
</div> <!--art-->

</div></div>
</script>



<div id="content" class="index">

<div id="header">
<div id="title"><a href="/">{Title}</a></div>
</hr><hr><hr>
{block:IfEndlessScroll}
<div class="autopagerize_page_element">
{/block:IfEndlessScroll}

{block:IfEndlessScroll}
<div class="autopagerize_page_element">
{/block:IfEndlessScroll}


{block:Posts}<br>
<div class="entry">

{block:Text}
{block:Title}<div class="title"><a href="{Permalink}"><h2>{Title}</h2></a></div>{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/>{LinkCloseTag}
{block:IfShowCaptions}{block:IndexPage}{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}{/block:IfShowCaptions}{block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
{block:HasTags}Tags: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{Photoset-HighRes}
{/block:Photoset}

{block:Quote}
<h2>"{Quote}"</h2>
{block:Source}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{Source}{/block:Source}
{/block:Quote}

{block:Link}
<h2><a href="{URL}"><small>&rarr;</small> {Name}</a></h2>{block:Description}{Description}
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
{block:Lines}{block:Label}<b><i>{Label}</i></b> {Line}<br>{/block:Label}{/block:Lines}
{/block:Chat}


{block:Audio}
<div class="audio">
{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" width="50" height="50"></a>
<div class="player"><width="100%">{AudioPlayerBlack}</width></div>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:AlbumArt}{/block:Audio}


{block:Answer}
<b>{Asker}: {Question}</b>
{Answer}
{/block:answer}

{block:Video}
<div class="video">
{Video-700}
</div>
{block:Caption}{Caption}{/block:Caption}
{/block:Video}

{block:IndexPage}<div class="perma">{Block:Date}POSTED: <a href="{Permalink}">{TimeAgo}</a>{/block:Date} NOTES: <a href="{Permalink}#notes" title="notes">{NoteCount}</a>
{block:HasTags}TAGS: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</div>{/block:IndexPage}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

</div>
{/block:Posts}


{block:IfNotEndlessScroll}
{block:Pagination}
<div id="pagination">
<div style="float:left">{block:PreviousPage}
<a href="{PreviousPage}" title="previous page"><b></b></a>
{/block:PreviousPage}</div>
{CurrentPage} / {TotalPages}
<div style="float:right"> {block:NextPage}
<a href="{NextPage}" title="next page"><b></b></a>
{/block:NextPage}</div>
</div>
{/block:Pagination}
{/block:IfNotEndlessScroll}

{block:IfEndlessScroll}</div>{/block:IfEndlessScroll}



</div>

</body>
</html>
Sorry if the code is scattered.

Another problem I am having is that there seems to be extra space on the right, causing a horizontal scroll. It also scrolls the background causing the margin to be off. I have included some images.

http://i294.photobucket.com/albums/m...367/Layout.jpg
http://i294.photobucket.com/albums/mm98/undesired367/BottomScroll.jpg

Hopefully you understand what my problem is and it is an easy fix. Thanks for looking.