I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing.
my blogger blog is functioning well on my site for now, but the blog feed (left) and the sidebar (right) doesn't center
here's the css i'm modifying to center it. i apologise for the mess.
the code causes the blogcontent div to appear center but the sidebar div appears at the bottom of the page. how do i fix this so that it appears like it is on the blog now but make it centered in the page? i'm not worried about errors on IE for now. just firefox or safari.
thanks.
my blogger blog is functioning well on my site for now, but the blog feed (left) and the sidebar (right) doesn't center
here's the css i'm modifying to center it. i apologise for the mess.
Code:
<html>
<head>
<title>cris-kun's 'Blog - www.puff-x.com</title>
<$BlogMetaData$>
<style type="text/css">
#b-navbar { height:0px; visibility:hidden; display:none }
A:link {
font-size: 8pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 555555;
font-weight: none;
text-decoration: underline;
}
A:visited {
font-size: 8pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: underline;
}
A:active {
font-size: 8pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: none;
}
A:hover {
color: 222222;
font-size: 8pt;
font-family: tahoma;
line-height: 9px;
text-decoration: underline;
}
A.sidebar:link {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: none;
}
A.sidebar:visited {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: none;
}
A.sidebar:active {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: none;
}
A.sidebar:hover {
color: 222222;
font-size: 7pt;
font-family: tahoma;
line-height: 9px;
text-decoration: underline;
}
A.bubble:link {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: none;
}
A.bubble:visited {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: none;
}
A.bubble:active {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: 000000;
font-weight: none;
text-decoration: none;
}
A.bubble:hover {
color: 222222;
font-size: 9pt;
font-family: tahoma;
line-height: 9px;
}
A.permalink:link {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: FF9900;
font-weight: none;
text-decoration: none;
}
A.permalink:visited {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: FF9900;
font-weight: none;
text-decoration: none;
}
A.permalink:active {
font-size: 7pt;
font-family: tahoma;
letter-spacing: 0px;
line-height: 9px;
color: FF9900;
font-weight: none;
text-decoration: none;
}
A.permalink:hover {
color: FFCC00;
font-size: 7pt;
font-family: tahoma;
line-height: 9px;
}
body
{
text-align: center;
font-family:tahoma;
font-size:8pt;
color: #222222;
background-color: #E8E8E8;
background-image: url('');
background-repeat: repeat-x;
background-attachment: fixed;
}
#content
{
margin: 0 auto;
text-align: left;
width:780px;
}
#blogcontent
{
margin: 0 auto;
text-align: left;
border-bottom: dashed #FF9933;
border-top:3px solid #999999;
border-left: solid #FF9933;
border-right: solid #FF9933;
background-color:#FFF3E5;
background-repeat: repeat;
background-attachment: scroll;
width: 542;
}
#sidebar
{
margin: 0 auto;
text-align: left;
border-top:3px solid #999999;
border-left-color: solid #FF9933;
border-bottom: dashed #FF9933;
border-right: solid #FF9933;
font-size:7pt;
background-color:#EEEEEE;
background-repeat: repeat;
background-attachment: scroll;
width: 230;
}
textarea, input, select {
font: 7pt tahoma;
letter-spacing: 1px;
color: white;
background-color: white;
border:1px solid none;
}
.head {
font-family: tahoma;
background-color: none;
text-transform :lowercase;
font-weight: bold;
font-size: 11px;
line-height: 12px;
border-bottom: 2px dotted #9900CC;
color: #FF0033;
text-align:left;
}
.title {
font-family: tahoma;
background-color: none;
text-transform :;
font-weight: bold;
font-size: 14px;
line-height: 12px;
color: #FF6600;
text-align:left;
}
.date {
font-family: tahoma;
background-color: none;
text-transform : lowercase;
font-weight: bold;
font-size: 10px;
line-height: 12px;
color: #3333FF;
text-align:right;
}
.notes {
font-family: tahoma;
background-color: none;
font-weight: bold;
font-size: 11px;
line-height: 12px;
border-bottom: 2px dotted #666666;
color: #666666;
text-align:left;
}
.post-title {
background:url("");
margin:.25em 0;
}
input
{
color: #FF0033;
background: #FFF3E5;
border: 1px solid #FF3300
}
.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
blockquote {
color: #000000;
background-color: none;
border: 1px dotted black;
padding: 2px;
}
</style>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if (navigator.appName == "Microsoft Internet Explorer")
{alert("This blog is now more compatible, but now looks wonky on IE.\n You're better off using Firefox or something else. Sorry.\n http://www.getfirefox.com")}
else
{}
}
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'http://www.puff-x.com/pfx_main/criskun_writeblog.jpg'
theImages[1] = 'http://www.puff-x.com/pfx_main/criskun_eatblog.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
// End -->
</script>
<script type="text/javascript" src="/styleswitcher.js"></script>
<script language="Javascript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=1,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=1050,height=620,left = 0,top = 84');");
}
// End -->
</script>
</head>
<body topmargin="0" onload="detectBrowser()">
<div style="background-color:#E8E8E8; position:absolute; top:0px; left:0px; width:100%;">
<a href="http://www.puff-x.com/index.html"><img src="http://www.puff-x.com/pfx_main/naviheader.gif" border="0"/></a>
<a href="http://www.puff-x.com/blog.htm"><img src="http://www.puff-x.com/pfx_main/naviblog.gif" border="0"/></a>
<a href="http://www.puff-x.com/artwork.htm"><img src="http://www.puff-x.com/pfx_main/naviart.gif" border="0"/></a>
<a href="http://www.puff-x.com/hoptimism.htm"><img src="http://www.puff-x.com/pfx_main/navihop.gif" border="0"/></a>
<a href="http://www.puff-x.com/flicritic.htm"><img src="http://www.puff-x.com/pfx_main/naviflic.gif" border="0"/></a>
<a href="http://www.puff-x.com/downloads.htm"><img src="http://www.puff-x.com/pfx_main/naviloads.gif" border="0"/></a>
</div>
<div align="center">
</div><!-- --><div id="b-navbar"><a href="http://www.blogger.com/" id="b-logo" title="Go to Blogger.com"><img src="http://www.blogger.com/img/navbar/1/logobar.gif" alt="Blogger" width="80" height="24" /></a><form id="b-search" action="http://www.google.com/search"><div id="b-more"><a href="http://www.blogger.com/" id="b-getorpost"><img src="http://www.blogger.com/img/navbar/1/btn_getblog.gif" alt="Get your own blog" width="112" height="15" /></a><a href="http://www.blogger.com/redirect/next_blog.pyra?navBar=true" id="b-next"><img src="http://www.blogger.com/img/navbar/1/btn_nextblog.gif" alt="Next blog" width="72" height="15" /></a></div><div id="b-this"><input type="text" id="b-query" name="q" /><input type="hidden" name="ie" value="UTF-8" /><input type="hidden" name="sitesearch" value="judacris.blogspot.com" /><input type="image" src="http://www.blogger.com/img/navbar/1/btn_search.gif" alt="Search" value="Search" id="b-searchbtn" title="Search this blog with Google" /><a href="javascript:BlogThis();" id="b-blogthis">BlogThis!</a></div></form></div><script type="text/javascript"><!--
function BlogThis() {Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) { Q=y.getSelection();} else if (x.getSelection) { Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');void(0);}
--></script><div id="space-for-ie"></div>
<div style="margin:0px auto; top:20px;"><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script></div>
<div style="position:relative;">
<div id="blogcontent">
<Blogger>
<div class="post-title"><BlogDateHeader><div class="head"><$BlogDateHeaderDate$> <<</div></BlogDateHeader>
<div class="title"><$BlogItemTitle$></div></div>
<$BlogItemBody$><div align="right" style="font-size: 9px;">
<b>end statement. <a class="sidebar" href="mailto:judacris@gmail.com">judacris</a> @ <$BlogItemDateTime$></b> | <MainOrArchivePage>
<BlogItemCommentsEnabled>
<a class="sidebar" href="<$BlogItemPermalinkURL$>">
comments: (<$BlogItemCommentCount$>)
</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage> | <a class="permalink" href="<$BlogItemPermalinkUrl$>" title="permanent link"><b>permalink</b></a></div>
<br>
<ItemPage>
<BlogItemCommentsEnabled>
<div class="blogComments">
Comments:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a>
<$BlogCommentBody$><br />
<div class="byline"><a href="<$BlogCommentPermalinkURL$>"title="permanent link">#</a> posted by <$BlogCommentAuthor$> : <$BlogCommentDateTime$></div>
<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
</div>
</BlogItemCommentsEnabled>
</ItemPage>
</Blogger>
<div class="notes"></div><br>
<center><b>Archives:</b> <BloggerArchives><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a> </BloggerArchives>
<br/>
<!--Creative Commons License--><a rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/" target="_blank"><img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights20.png"/></a><br/>The Blog's Layouts are licenced under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons Licence</a>.<!--/Creative Commons License--><!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc/2.5/" />
<dc:title>Judacris's blog</dc:title>
<dc:creator><Agent><dc:title>Julian Yeo</dc:title></Agent></dc:creator>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/Text" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc/2.5/"><permits rdf:resource="http://web.resource.org/cc/Reproduction"/><permits rdf:resource="http://web.resource.org/cc/Distribution"/><requires rdf:resource="http://web.resource.org/cc/Notice"/><requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/><permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/></License></rdf:RDF> -->
Learn about the <a href="http://creativecommons.org" target="_blank">Creative Commons</a>.
<br><br>
<b>**END OF LINE - NO SIGNATURE IS REQUIRED**</b><br></center></div>
<div id="sidebar">
<div style="position:absolute; left:-18; top:-37; z-index:1;"><img src="/pfx_main/blog_nametag.gif"></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<i>Have you Seen this Man?</i><br>
<b>Julian Yeo</b>, Geek <br>
Creator, <a class="sidebar" href="hoptimism.htm" target="_blank"><b>Hopeless Optimism</b></a>. <br>
Born <b>Sometime August 1988</b>.<br>
Location: Lat. <b>1.3523</b> Long. <b>103.9419</b><br>
Alias: <b>dm29</b> from <a class="sidebar" href="http://dm29.deviantart.com/" target="_blank">deviantART</a>
<p>
<b>Enjoys</b> Artwork, The Matrix Trilogy, Casual Gaming, Friends, Sonic the Hedgehog and the Cute.<br />
<b>Condemns</b> Smoking, Global Warming and Racism. <br />
<b>Wants</b> to try to try to Change the World.
<br />
<p>
<div style="position:absolute; left: 60px; z-index:1;"><img src="/pfx_main/blog_frenfotos_side.gif" width="200px"></div><div class="head">friends</div>
- <a class="bubble" target="_blank" href="http://birdtalk.blogspot.com/">dan</a> (As seen on hOP)<br>
- <a class="bubble" target="_blank" href="http://get-her-sensations.blogspot.com/">jeanie</a><br>
- <a class="bubble" target="_blank" href="http://carnival-esque.livejournal.com/">vicki</a><br>
- <a class="bubble" target="_blank" href="http://www.alittledeath.blogspot.com">dinnie</a><br>
- <a class="bubble" target="_blank" href="http://www.somethings-cant-be-fixed.blogspot.com/">daryl</a><br>
- <a class="bubble" target="_blank" href="http://amoixsimplegalx.blogspot.com">wanyun</a><br>
- <a class="bubble" target="_blank" href="http://heelsanddancefloors.blogspot.com">poovan</a><br>
- <a class="bubble" target="_blank" href="http://sadiistic-me.blogspot.com/">charlene</a><br>
- <a class="bubble" target="_blank" href="http://humphfx.blogspot.com/">yiwen</a><br>
- <a class="bubble" target="_blank" href="http://scrappedlife.blogspot.com/">sam</a><br>
- <a class="bubble" target="_blank" href="http://memoirs-of-my-life.blogspot.com/">syasya</a><br>
- <a class="bubble" target="_blank" href="http://www.littleshinystars.blogspot.com/">hilda</a><br>
- <a class="bubble" target="_blank" href="http://litong-files.blogspot.com/"><i>litong</i></a><br>
- <a class="bubble" target="_blank" href="http://koichii.jugem.jp/"><i>derrick</i></a><br>
<p>
<p>
<div class="head">words</div>
<center><iframe src="/tagbox/" width="230" height="180" frameborder="0" border="0"></iframe></center>
<!--<div class="head"></div><br />
<object width="230" height="66"><param name="movie" value="http://media.imeem.com/m/_PM7WT14WE"></param><param name="wmmode" value="transparent"></param><embed src="http://media.imeem.com/m/_PM7WT14WE" type="application/x-shockwave-flash" width="230" height="66" wmode="transparent"></embed></object>-->
<div class="head">photos by <a href="http://flickr.com/photos/judacris/" target="_blank"><strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong></a></div>
<center><!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {background-color:#333333; color:#FFFFFF; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3399FF; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = '333333';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=68188686%40N00';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner">
<script type="text/javascript">zg_insert_badge();</script>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
<!-- End of Flickr Badge --></center>
<div class="head">search</div>
<!-- SiteSearch Google -->
<FORM method="GET" action="http://www.google.com/search" target="_blank">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<TABLE ><tr><td>
</td>
<td>
<INPUT TYPE="text" name="q" size="31" maxlength="255" value="Search the Site" >
<INPUT type="submit" name="btnG" VALUE="Search">
<font size="-1">
<input type="hidden" name="domains" value="http://www.puff-x.com"><br><input type="radio" name="sitesearch" value=""> Web <input type="radio" name="sitesearch" value="http://www.puff-x.com" checked> Puff-x <A HREF="http://www.google.com/" target="_blank">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google" height="20px" align="left"></A><br>
</font>
</td></tr></TABLE>
</FORM>
<!-- SiteSearch Google --><p>
<div class="head">labels</div>
• <a class="sidebar" href="labels/Artwork.html">Artwork</a><br />
• <a class="sidebar" href="labels/Clips.html">Clips</a><br />
• <a class="sidebar" href="labels/Cute.html">Cute</a><br />
• <a class="sidebar" href="labels/Food.html">Food</a><br />
• <a class="sidebar" href="labels/Games.html">Games</a><br />
• <a class="sidebar" href="labels/hOP.html">hOP</a><br />
• <a class="sidebar" href="labels/Movies.html">Movies</a><br />
• <a class="sidebar" href="labels/Music.html">Music</a><br />
• <a class="sidebar" href="labels/Perth%20Vacation%2007.html"><b>Perth Vacation 07</b></a><br />
• <a class="sidebar" href="labels/Update.html">Site Updates</a><br />
<p>
<div class="head">what you missed</div>
<BloggerPreviousItems>-<a class="sidebar" href="<$BlogItemPermalinkURL$>"> <$BlogPreviousItemTitle$>
</a><br />
</BloggerPreviousItems>
<p>
<div class="head">archives</div>
<BloggerArchives>
<a class="sidebar" href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives>
<p>
<br>
<div class="notes">Done on a Mac. ?<br />
powered by Blogger. </div>
<div align="center"><b>Judacris's Blog @ Puff-x.com. <br>© 2004 - 2007 Puff-x.com.</b>
<br>email: <a class="sidebar" href="mailto:judacris@gmail.com">judacris@gmail.com</a>
<br>All Copyrighted Property belong to their Respective Owners.
<br><br>
<a href="atom.xml" title="RSS - Puff-x.com" target="_blank" style="text-decoration: none"><img src="pfx_main/rsspuffx.gif"></a></font>
<br>
<a href="http://www.spreadfirefox.com/?q=affiliates&id=198769&t=219"><img border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2b80x15.gif"/></a></a>
<br><!--Creative Commons License--><a rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/" target="_blank"><img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights20.png"/></a><br/>The Blog's Layouts are licenced under a
<br><a class="sidebar" rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons Licence</a>.<!--/Creative Commons License--><!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by-nc/2.5/" />
<dc:title>Judacris's blog</dc:title>
<dc:creator><Agent><dc:title>Julian Yeo</dc:title></Agent></dc:creator>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/Text" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc/2.5/"><permits rdf:resource="http://web.resource.org/cc/Reproduction"/><permits rdf:resource="http://web.resource.org/cc/Distribution"/><requires rdf:resource="http://web.resource.org/cc/Notice"/><requires rdf:resource="http://web.resource.org/cc/Attribution"/><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse"/><permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/></License></rdf:RDF> -->
<br>Learn about the <a class="sidebar" href="http://creativecommons.org" target="_blank">Creative Commons</a>.</div>
<br><b>blog designed by <a class="sidebar" href="mailto:judacris@gmail.com">Julian Yeo.</a> © puff-x.com</b>
</div>
</body>
</html>
thanks.
Comment