I want the left panel to be on the left of the page and the right one to align with the right side with my main content and header/title/menu to be centered on the page! also want to add an IN LINE image on the side panel.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>Blue Sky</title>
<meta name="description" content=
{description} />
<link rel="shortcut icon" href=
"http://30.media.tumblr.com/avatar_f9461cdb30ac_16.png" />
<link rel="alternate" type="application/rss+xml" href=
"http://blueskyandhardrock.com/rss" />
<meta name="color:Background" content="#" />
<meta name="color:Box" content="#" />
<meta name="color:Text" content="#" />
<meta name="color:Links" content="#" />
<meta name="color:Links Hover" content="#" />
<meta name="color:title color" content="#" />
<meta name="color:title hover color" content="#" />
<meta name="color:Blogtitle color" content="#" />
<meta name="color:Navbar background color" content="#" />
<meta name="color:Navbar text color" content="#" />
<meta name="color:Navbar hover color" content="#" />
<meta name="color:Sidebar Header" content="#" />
<meta name="color:Sidebar Header text color" content="#" />
<meta name="color:customlinks Background" content="#" />
<meta name="color:customlinks Hover Background" content=
"#" />
<meta name="color:customlinks text color" content="#" />
<meta name="color:Chat" content="#" />
<meta name="color:Asker Background" content="#" />
<meta name="image:Background" content="" />
<meta name="font:Body" content="" />
<meta name="font:Links" content="" />
<meta name="font:Title" content="" />
<meta name="if:Show Tumblr Picture" content="1" />
<meta name="if:ShowTitle" content="1" />
<meta name="if:Description" content="1" />
<meta name="if:ShowTweets" content="0" />
<meta name="if:ShowLinks" content="1" />
<meta name="if:ShowNotes" content="1" />
<meta name="if:ShowReblogLink" content="1" />
<meta name="if:ShowPostOrigin" content="0" />
<style type="text/css">
/*<![CDATA[*/
body { background: #url('http://assets.tumblr.com/images/x.gif') bottom left fixed repeat;
color: #;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 11px;
padding-top:5px;
background-position:left;
text-transform:none;}
a, a:link, a:visited { color: #;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-transform: none;
text-decoration: none; font-size: 11px;}
a:hover {color: #;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px; }
.popoy {
font-size:9px;
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif; line-height:9px;
text-transform:none;
margin-top:1px;}
.popoy a {
font-size:9px;line-height:9px;
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
text-transform:none;
margin-top:1px;
color: #6ca518;}
.popoy a:hover {font-size:9px;line-height:9px;
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
text-transform:none;
margin-top:1px;
color: #;}
.oreos a {
background-color:#;
font-family: 'Century Gothic', 'Apple Gothic', sans-serif font-size: 12px; color: #;
line-height: 16px;
text-transform: none;
letter-spacing:0px;display:block;padding:1px;}
.oreos a:hover {
background-color:#0b9aa8;
font-family: 'Century Gothic', 'Apple Gothic', sans-serif font-size: 12px; color: #7fb413;
line-height: 16px;
text-transform: none;
letter-spacing:0px;
padding:1px;
display:block;}
p {
margin: 5px 0 0 0;
line-height:12px;
padding: 0; }
ul, ol {
margin: 5px 0 0 25px; padding: 0; }
blockquote {
margin: 2px 2px 1px 2px;
padding: 1px 2px 1px 4px;
border: 0px solid #; }
blockquote p {
margin: 0;
padding: 0;
line-height: 12px; }
#supahmain { overflow: auto; width: 708px; top: 90px;
left: 190px; position: absolute; color:#;}
#main { overflow: auto; width: 516px; top: 90px;
left: 377px; position: absolute;}
#popcorns {background-color: transparent;
width: 195px;
overflow:hidden; padding: 4px;
position:absolute;text-align:justify;
text-transform:none;
top: 86px;left: 175px;font-family:Verdana, Geneva, Tahoma, sans-serif;}
#popcorns2 {background-color: transparent;
width: 195px;
overflow:fixed; padding: 4px;
position:absolute;text-align:justify;
text-transform:none;
top: 86px;left: 892px;font-family:Verdana, Geneva, Tahoma, sans-serif;}
.posttitle {
background-color: transparent;
font-family: 'Century Gothic', 'Apple Gothic', sans-serif; font-size: 10px;
line-height: 16px; color:#; margin-right:-3px; margin-top:-3px;
margin-left:-3px; margin-bottom:3px; text-transform: none;
letter-spacing:0px;display:block;padding:1px;}
#sidebarhead {
background-color:#;
line-height: 16px; font-size: 10px;
color:#0ba0af;
text-transform: none;
letter-spacing:0px;display:block;padding:1px;}
#sideperm {
background-color: transparent;
width: 100px;
overflow:hidden; padding: 4px;
position:absolute;text-align:left;
text-transform:none;
top: 86px;left: 100px;font-family:Verdana, Geneva, Tahoma, sans-serif;}
#left {
line-height: 10px;
height:auto;
padding: 5px; font-size: 10px;
background-Color: transparent;
Display:block;
}
#top{top: 25px;
z-index:8;
position:absolute;
display:block;
left: 175px;
padding: 0px;
width: 514px;
height: 30px;
border: 0px solid #212121;
background-color: transparent;
background-image:url();
}
#bottom{
z-index:8;
position:absolute;
display:block;
left: 254px;
padding: 0px;
width: 500px;
height: 30px;
border: 0px solid #212121;
background-color: #020202;
background-image:url();
}
.right { background-color: #ffffff;
margin: 0 0 5px 0; padding: 3px;
text-align: left;
text-transform:(text:Body Text Transform);
overflow:hidden}
.right img {max-width:500px;}
.right img {
border: 0px;
display: block;
margin-left: 4px;
margin-top:10px;
margin-bottom:5px;}
.notesbar { background-color: transparent;
margin: 0 0 5px 0; padding: 5px; margin-left:-1px;
height:10px;
text-transform:(text:Body Text Transform);
overflow:hidden}
#credits {background-color: transparent;
width: 30px;
overflow:hidden;
position:fixed;text-align:justify;
text-transform:none;
top: 20px;left: 230px;font-family:Verdana, Geneva, Tahoma, sans-serif;}
a.details {
display:block;
font-size:9px;line-height:9px;
color:#000000;
text-transform:uppercase;
}
a.details hover {
display:block; line-height:9px;
font-size:9px;
color:#E4113B;
text-transform:uppercase;
}
.title, .title a {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 24px; color: #259096;
line-height: 20px;
letter--1acing:-1px;
text-transform: none;}
.title:hover, .title a:hover {
color:#007ADD;
}
.btitle{ top:30px; background-color: transparent;
font-family: ; color: #259096;
font-size: 48px;
line-height: 40px;
letter-spacing:1px;
text-transform: none; text-align:center;
}
.pag
{ background-color:#ffffff;
margin: 0 0 0px 0; padding: 3px; color: ;
text-align: center; font-size:9px;
text-transform:uppercase;
overflow:hidden }
.pag a { background-color:#ffffff;
margin: 0 0 0px 0; padding: 3px;
text-align: center; font-size:9px;
text-transform:uppercase;
overf#fw:hidden }
#fot, .fot a {
font-size:9px; text-align: center; margin-bottom:-3px;
}
#fot a:link, #fot a:visited, #fot a:active, #fot a:hover {
font-size:9px;
}
.pos { background-color: #e7d31a; }
.audioplayer { padding-left: 12px;background-color:#e3e3e3; }
.playcount {float: right;clear: both;padding-top: 10px;padding-right: 20px;color:;text-shadow: none;font-size:10px;text-transform:none;}
#popcorns img {max-width:100%;}
.right img {max-width:500px; margin-left:5px; margin-top:10px;}
*:active,*:focus { outline: 0px; }
.right img { border: 0px; display: block;}
#popcorns img { border: 0px; display: block;}
.ques {background-color:#000000; padding:5px; font-family: 'Century Gothic', 'Apple Gothic', sans-serif; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing:-1px;}
.ques a {font-family: 'Century Gothic', 'Apple Gothic', sans-serif; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing:-1px;color:#6ca518;}
.ques a:hover {color: #00579C;}
.said a {font-family: 'Century Gothic', 'Apple Gothic', sans-serif; font-size: 12px; line-hepxht: 14px; text-transform: uppercase; letter-spacing:-1px;margin-top:6px;}
.said a:hover {font-family: 'Century Gothic', 'Apple Gothic', sans-serif; font-size: 12px; line-height: 14px; text-transform: uppercase; letter-spacing:-1px;margin-top:6px;}
.righty {float:right;}
.righty img {margin-top:-7px;}
.pagination {float:center; margin-top:0px;}
.lefty {float:left;}
.tags {float:left; line-height:5px;}
.fot img {margin-bottom:-5px;}
#Navi {
background-color: transparent; width:912px; height: 30px;font-size: 10px; color: #6ca518; font-weight: bold;
margin: 0 auto 0; padding:0px;margin-bottom:-3px; margin-top:-3px;margin-left:1px;
margin-right:-3px;}
.navic{float:left; width:712px; }
#nav {margin: 0; padding: 0; list-style: none;}
#nav ul {float: left; list-style: none; margin: 0; padding: 0;}
#nav li {list-style: none; margin: 0; padding: 0;}
#nav li a, #nav li a:link, #nav li a:visited {
color: #6ca518; display: block; font-family:arial;
text-transform:uppercase; font-weight: normal; margin: 0;
padding: 9px 20px 9px;
}
#nav li a:hover, #nav li a:active {background-color: #0ba0af;
color: #6ca518; margin: 0; padding: 9px 20px 9px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #0e3240; width: 150px; color: #6ca518;
font-weight: normal; text-transform: uppercase; float: none;
margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff;
border-left: 1px solid #fff; border-right: 0px solid #fff;
}
#nav li li a:hover, #nav li li a:active {background:#14623f
; color: #6ca518; padding: 7px 10px;}
#nav li {float: left; padding: 0;}
#nav li ul {z-index: 0; position: absolute; left: -999em;
height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
.nextprev { font-family: arial; font-size: 15px; text-transform: uppercase; color: #fff; background: #F3C22C; padding: 3px; dispiny: inline-block; width:45px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26803436-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<meta http-equiv="x-dns-prefetch-control" content="off" />
</head>
<body>
<div id="top">
<table width="712px" align="center" class="shadow">
<tr>
<td>
<div class="btitle">
Blue Sky + Hard Rock
</div>
<div class="navic">
<div style="margin-left: 2em" id='nav'>
<center>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='/about-us'>ABOUT THE
ATMOSPHERE</a></li>
<li><a href=
'http://flavors.me/'>SOCIAL
SKIES</a></li>
<li><a href='/rss'>RSS FEED</a></li>
<li><a href='/archive'>THE ARCHIVES</a></li>
<li><a href="/page/2">next -:-</a></li>
</ul>
</center>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="popcorns">
<div align="left">
<div id="sidebarhead">
<p align="center">I am made of blue sky + hard rock</p>
</div>
</div>
<div align="left">
<center>
<a href="/"><img src=
"http://26.media.tumblr.com/avatar_f9461cdb30ac_128.png"
class="portrait" width="185" /></a>
</center>
</div>
<div align="left">
<div id="sidebarhead">
<p align="center">-:- NAVIGATE THE SKY -:-</p>
</div>
</div>
<div id="left">
<div class="oreos">
<p align="center"><a href=
"http://blueskyhardrock.tumblr.com/indie">
rock</a></p>
<p align="center"><a href=
"http://blueskyhardrock.tumblr.com/electro"> dance</a></p>
<p align="center"><a href=
"http://blueskyhardrock.tumblr.com/playlists-charts">Playlists
</a></p>
<p align="center"><a href=
"http://blueskyhardrock.tumblr.com">
Upcoming </a></p>
<p align="center"><a href=
"http://blueskyhardrock.tumblr.com/free-music">Free
</a></p>
<p align="center"><a href=
"http://blueskyhardrock.tumblr.com/show-schedule">Live
Music </a></p>
</div>
</div>
<div align="left">
<div id="sidebarhead">
<p align="center">-:- DIVE IN-:-</p>
</div>
</div>
<div id="left">
Music- in a consuming + slightly obsessive manner.
<p align="center"><strong><a href=
"http://feeds.feedburner.com/blueskyhardrock" rel="alternate"
type="application/rss+xml">• Subscribe to
RSS •</a></strong><br /></p>
<p align="center"><strong><a href=
"http://feedburner.google.com/fb/a/mailverify?uri=blueskyhardrock&loc=en_US">
• Get Updates by Email
•</a></strong></p>
</div>
<p><!-- start of tweets-->
<!-- end of tweets-->
<!--Start of extra box left--></p>
<div id="left">
<!--put your stuffs below this line-->
</div>
<p><!--Endof extra box left--></p>
</div>
<div id="popcorns2">
<div align="left">
<div id="sidebarhead">
<p align="center">Contact Us</p>
</div>
</div>
<div id="left">
<iframe frameborder="0" border="0" scrolling="no" width="185"
height="150" allowtransparency="true" src=
"http://www.tumblr.com/ask_form/blueskyhardrock.tumblr.com"></iframe>
</div>
<div align="left">
<div id="sidebarhead">
<p align="center">-:- Blue Sky-:-</p>
</div>
</div>
<div id="left">
<div class="oreos">
<a href="http://facebook.com">
Facebook</a>
<p><a href="http://soundcloud.com">Sound Cloud</a></p>
<p><a href="http://twitter.com">Twitter
</a></p>
<p><a href="http://">1st Issue Jan
'12</a></p>
<p><a href="http://"> Services </a></p>
<p><a href="mailto:">Blog</a></p>
<p align="center">Contact </p>
</div>
</div>
<p><!--Start of extra box right--></p>
<div id="left">
<!--put your stuffs below this line-->
</div>
<p><!--Endof extra box right--></p>
</div>
<div id="main">
{block:Posts}
<div class="right">
{block:Text}{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}<p><br></p>{Body}<p><br></p>
{/block:Text}
{block:Photo}
{block:IndexPage} <a href="{Permalink}"> {/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}<p><br></p>
{block:Caption}{Caption}{/block:Caption}<p><br></p>
{/block:Photo}
{block:Photoset}{Photoset-400}<p><br></p>{block:Caption}{Caption}{/block:Caption}<p><br></p>
{/block:Photoset}
{block:Link}
<div class="title"><a href="{URL}" class="post_title" target="_blank"> {Name}</a></div> <p><br></p>{block:Description}{Description}{/block:Description}<p><br></p>
{/block:Link}
{block:Audio}{block:TrackName}
<div class="title">
<a href="{Permalink}" title="{TrackName}">{TrackName}</a>
</div>
{block:Artist}
{Artist}
{/block:Artist}
{/block:TrackName}
<center>
<table style="background: url(http://static.tumblr.com/vy2pzfk/l1Aloy0hv/tape_eited.png) no-repeat bottom right transparent; width:420px; height:187px; margin-top:10px; padding-bottom:54px;">
<tr><td style="width:160px; height: 150px;">{block:AlbumArt}<img src="{AlbumArtURL}" width="140px">{/block:AlbumArt}</td> <td>{AudioPlayerGrey}
</td></tr></table></a></center><p><br></p>
{block:Caption}<div id="regular">{Caption}</div>{/block:Caption}<p><br></p>
{/block:Audio}
{block:Video}
<div class="title">
<a href="{Permalink}" title="{Permalink}"> | Post from {TimeAgo} |</a>
</div>
{Video-500}<p><br></p>{block:Caption}<a href="{Permalink}">{Caption}</a>{/block:Caption}<p><br></p>
{/block:Video}
<div class="popoy">
<div class="lefty"><a href="{Permalink}">• <b>POSTED</b> {TimeAgo} •</a> {PlayCountWithLabel}
{block:ExternalAudio}<a href="{ExternalAudioURL}"> download</a>{/block:ExternalAudio}
{block:ifShowNotes}{block:NoteCount}<a href="{Permalink}"> <font color="#259096">♪</font> <b>{NoteCountWithLabel}</b></a>{/block:NoteCount}{/block:ifShowNotes}
</div>
<div class="righty">
{/block:ifShowReblogLink}{block:IndexPage}<a href="{ReblogURL}" target="_blank"><div class="details">• REBLOG •</font></div></a> {/block:IndexPage}{/block:ifShowReblogLink}
</div></div>
</div>
<div class="notesbar">
<div class="popoy">
<div class="tags">
</div>
<div class="righty">
{block:ifShowPostOrigin}{block:RebloggedFrom}{/block:RebloggedFrom}{/block:ifShowPostOrigin}
</div></div>
</div>
{block:PostNotes}
<div class="right">
<div class="title">{block:NoteCount}<a href="{Permalink}"> <font color="#EC0000">♥</font> <b>{NoteCountWithLabel}</b></a>{/block:NoteCount}</div>
{PostNotes}
</div>
{/block:PostNotes}
{/block:Posts}
<div class="pag">
<div class="pagination">
<div id="fot">
| <a href="http://about.me/">Blue Sky +
Hard Rock Entertainment</a> [share+credit] |
<strong><a href="/page/2">next -:-</a></strong>
</div>
</div>
</div>
</div><!-- BEGIN TUMBLR CODE --><iframe src=
"http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fblueskyandhardrock.com%2F&lang=en_US&name=blueskyhardrock"
scrolling="no" width="330" height="25" frameborder="0" style=
"position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;"
id="tumblr_controls"></iframe>
<!-- END TUMBLR CODE -->