A bizzare thing happens when I use the right column to nest remote content from a blog.
Everything in the middle column shifts to the right.
Everything is normal if I nest the remote content from the middle column.
I am included to think that it is either my CSS - or the nested content is pulling stuff which is messing my layout out.
Any thoughts?
This is my CSS:
body {margin: 0;
padding: 0;
font-family: sans-serif;
font-size: .7em;
line-height: 1.4em;}
div#container {
width: 770px;
margin: 30px auto 30px auto;
}
div#topnavbar {font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
font-weight: bold;
text-align: center;
background-color: #ffffff;
font-weight: bold;
padding: 8px;}
#topnavbar ul li a:link, #navbar ul li a:visited {color: #666666;
text-decoration: none;
display: inline;}
#topnavbar ul li a:hover {text-decoration: none;
border-bottom: groove #f9c1a5 6px;}
#topnavbar a.current {text-decoration: none;}
#topnavbar ul li {margin: 0px; padding: 0px; list-style-type: none; display: inline;}
#topnavbar ul {margin: 0px; padding: 0px;}
div#header {
text-align: center;
background-color: #ffffff;
color: #666666;
margin-bottom: 10px;}
#header-bg-repeat {
background-image: url(header-bg-repeat.gif);
background-repeat: repeat-x;
height: 111px;}
#header-bg {
background-image: url(header-bg.gif);
background-repeat: no-repeat;
background-position: center;
height: 111px;}
div#navbar {font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
font-weight: bold;
text-align: center;
background-image: url(navbar-bg.gif);
font-weight: bold;
padding: 8px;}
#navbar ul li a:link, #navbar ul li a:visited {color: #ffffff;
text-decoration: none;
display: inline;}
#navbar ul li a:hover {text-decoration: none;
border-bottom: groove #f9c1a5 6px;}
#navbar a.current {text-decoration: none;}
#navbar ul li {margin: 0px; padding: 0px; list-style-type: none; display: inline;}
#navbar ul {margin: 0px; padding: 0px;}
div#topad {padding: 2%;
text-align: center;
background-color: #ffffff;
color: #666666;
margin-bottom: 10px;}
div#botad {padding: 2%;
text-align: center;
background-color: #ffffff;
color: #666666;
margin-bottom: 10px;}
div#footer {padding: 2%;
text-align: center;
clear: both;
background-color: #ffffff;
color: #666666;}
div#maincontent {padding: 2%;
text-align: left;
margin-right: 325px;
margin-left: 150px;
background-color: #E4FFEE;
color: #666666;
margin-bottom: 10px;}
div#leftcolumn {padding: 2%;
float: left;
text-align: left;
background-color: #ffffff;
color: #666666;
width: 120px;}
div#rightcolumn {padding: 2%;
float: right;
text-align: left;
background-color: #ffffff;
color: #666666;
width: 295px;}
Actually - it's ok now. I was pulling an extra div tag from the site - and it was messing things up.
lol.