main wrapper & sidebar wrapper are not the same length!

firestarr1 · Joined: 08 Oct 2008 Posts: 1

I am a noob, plain and simple. I can't figure out how to have the main wrapper and side bar wrapper in blogger to be the same length. I have tried using different templates, but nothing works. I found a tutorial on how to change the problem using javascript, but I don't want to get too involved; I would just like my blog to look symmetrical! Here's the Web Address and code:

[url]http://bsharrisonclan.blogspot.com/[/url]

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: 897
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 28 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================

<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#214552" value="#ffffff">
<Variable name="mainTextColor" description="Text Color"
type="color" default="#ffffff" value="#000000">
<Variable name="mainLinkColor" description="Link Color"
type="color" default="#99ddff" value="#38b63c">
<Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#777766" value="#cc0000">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#446677" value="#000000">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#8cdfff" value="#e1771e">
<Variable name="sidebarBgColor" description="Sidebar Background Color"
type="color" default="#cedfbd" value="#ffffff">
<Variable name="sidebarHeaderColor" description="Sidebar Title Color"
type="color" default="#ffffff" value="#000000">
<Variable name="sidebarTextColor" description="Sidebar Text Color"
type="color" default="#335566" value="#e1771e">
<Variable name="sidebarLinkColor" description="Sidebar Link Color"
type="color" default="#336699" value="#38B63C">
<Variable name="sidebarVisitedLinkColor"
description="Sidebar Visited Link Color"
type="color" default="#333333" value="#cc0000">
<Variable name="descColor" description="Blog Description Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Sans-serif" value="normal bold 145% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="titleFont" description="Blog Title Font"
type="font" default="normal bold 275% Helvetica, Arial, Verdana, Sans-serif" value="normal bold 275% Helvetica, Arial, Verdana, Sans-serif">
<Variable name="sidebarHeaderFont" description="Sidebar Title Font"
type="font" default="normal bold 125% Helvetica, Arial, Verdana, Sans-serif" value="normal bold 125% Georgia, Times, serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font" default="normal bold 112% Arial, Verdana, Sans-serif" value="normal bold 81% Georgia, Times, serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

body {
background-image: url(http://i178.photobucket.com/albums/w263/firestarr1/fallingleavesorange.jpg); background-attachment: fixed; margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

/* Page Structure
----------------------------------------------- */
#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #;
width:744px;
margin:10px auto;
text-align:$startSide;
font: $bodyFont;
}
#wrap2 {
position:relative;
top:-4px;
$startSide:-4px;
background: #;
padding:10px;
border: 1px solid #fff;
}

#content-wrapper {
width:100%;
}
#main-wrapper {
background-image: url(http://i178.photobucket.com/albums/w263/firestarr1/fallingleavesy.jpg); background-attachment: fixed;
width:460px;
float:$startSide;
color:$mainTextColor;
font-size: 85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
margin:0;
padding:15px 20px;
}
#sidebar-wrapper {
background-image: url(http://i178.photobucket.com/albums/w263/firestarr1/fallingleavesy.jpg); background-attachment: fixed;
width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text breaking sidebar float in IE sidebar float */
}
#sidebar {
margin:0;
padding:2px 20px 10px;
}

#footer {
display:none;
}

/* Links
----------------------------------------------- */
a:link {
color:$mainLinkColor;
text-decoration:none;
}
a:visited {
color: $mainVisitedLinkColor;
text-decoration:none;
}
a:hover {
color: $mainVisitedLinkColor;
text-decoration:underline;
}
a img {
border-width:0;
}

#sidebar a {
color: $sidebarLinkColor;
}
#sidebar a:visited {
color: $sidebarVisitedLinkColor;
}
#sidebar a:hover {
color: $sidebarVisitedLinkColor;
}

/* Header
----------------------------------------------- */
#header-wrapper {
background: #;
padding-bottom: 4px;
position: relative;
min-height: 190px;
_height: 0px;
}

#header .titlewrapper {
background:#269 url("http://www.blogblog.com/no897/topleft_$startSide.gif") no-repeat $startSide bottom;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
margin:0px 0px 10px 0px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
_height: 0px;
min-height: 70px;
}
#header h1 {
background:url("http://www1.blogblog.com/no897/bg_header.gif") no-repeat $startSide top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
_height: 0px;
}
#header h1 a {
color:#;
text-decoration:none;
}
.postpage #header h1 {
padding-top:0;
background-position:0 -40px;
}

.clear { clear: both; }

/* Description
----------------------------------------------- */
#header .descriptionwrapper {
background: #88ddff url("http://www2.blogblog.com/no897/bg_desc_top_$startSide.gif") no-repeat $startSide top;
margin:0 0 6px;
padding:12px 0 0;
color: $descColor;
font-size: 75%;
border-bottom: 1px solid #ffffff;
width: 100%;
}
#header .description {
background:url("http://www.blogblog.com/no897/bg_desc_bot_$startSide.gif") no-repeat $startSide bottom;
margin:0;
padding:0 0 12px;
display:block;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
border-bottom: 1px solid #ffffff;
}

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www2.blogblog.com/no897/temp_no.gif") no-repeat $startSide center;
/* Keep everything below */
display:block;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}

.postpage #description em {
font-size:1px;
line-height:1px;
color:$descColor;
visibility:hidden;
}

/* Posts
----------------------------------------------- */
h2.date-header {
margin:0 0 .5em;
line-height: 1.4em;
font: $dateHeaderFont;
text-transform:lowercase;
color:$dateHeaderColor;
}
.post {
margin:0 0 2em;
}
.post h3 {
margin:0 0 .25em;
line-height: 1.4em;
font-weight: bold;
font-size: 150%;
color:$postTitleColor;
}
.post h3 a {
text-decoration:none;
color:$postTitleColor;
}
.post h3 a:link {
color: $postTitleColor;
}
.post h3 a:hover {
color: $mainVisitedLinkColor;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
color:$postTitleColor;
text-transform:lowercase;
}
.post-footer .post-author,
.post-footer .post-timestamp {
font-style:normal;
}
.post blockquote {
margin:1em 20px;
padding:5px 0;
border:2px solid #356;
border-width:2px 0;
}
.post blockquote p {
margin:.5em 0;
}
.post img {
border:5px solid #fff;
}

/* Comments
----------------------------------------------- */
#comments {
margin:2em 0 0;
border-top:2px solid #356;
padding-top:1em;
}
#comments h4 {
margin:0 0 .25em;
font-weight: bold;
line-height: 1.4em;
font-size: 150%;
text-transform:lowercase;
color: #9ec;
}
#comments-block {
margin-top:0;
margin-$endSide:0;
margin-bottom:1em;
margin-$startSide:0;
line-height:1.6em;
}
.comment-author {
margin:0 0 .25em;
font-weight: bold;
line-height: 1.4em;
font-size: 112%;
text-transform:lowercase;
}
.comment-body, .comment-body p {
margin:0 0 .75em;
}
p.comment-footer {
margin:-.25em 0 2em;
}
#main .comment-footer a {
color: #689;
}
#main .comment-footer a:hover {
color: #9ec;
}
.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar
----------------------------------------------- */
.sidebar h2 {
margin:1em 0 .25em;
line-height: 1.4em;
font: $sidebarHeaderFont;
color: $sidebarHeaderColor;
text-transform:lowercase;
}
.sidebar .widget {
margin:0 0 1.5em;
padding:0;
}
.sidebar ul {
list-style:none;
margin: 0;
padding: 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:20px;
text-indent:-20px;
line-height:1.4em;
}

/* Profile
----------------------------------------------- */
.profile-datablock, .profile-textblock {
margin:0 0 .75em;
line-height:1.4em;
}
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
border: 5px solid $sidebarHeaderColor;
}
.profile-data {
font-weight: bold;
}

/* Misc
----------------------------------------------- */
#footer-wrapper {
clear:both;
display:block;
height:1px;
margin:0;
padding:0;
font-size:1px;
line-height:1px;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
margin-top: 0;
}
body#layout #main,
body#layout #sidebar {
padding: 0;
}
body#layout #main-wrapper,
body#layout #sidebar-wrapper {
height: auto;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The Harrison Clan (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Image5' locked='false' title='We support Proposition 8!' type='Image'/>
<b:widget id='Image1' locked='false' title='Bryan and Sarah' type='Image'/>
<b:widget id='Image3' locked='false' title='Teach 'em while they're young...' type='Image'/>
<b:widget id='Image2' locked='false' title='Not a happy camper!' type='Image'/>
<b:widget id='Image4' locked='false' title='The Harrisons' type='Image'/>
<b:widget id='LinkList2' locked='false' title='People' type='LinkList'/>
<b:widget id='LinkList1' locked='false' title='Sites To See' type='LinkList'/>
<b:widget id='BlogArchive1' locked='false' title='History' type='BlogArchive'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 
</div></div> 
</body>
</html>

Any help would be greatly appreciated!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1210 Location: Biloxi, MS

Sorry, but trying to do this with blog editor code without getting into actually writing the code by hand is difficult for us here. I can only suggest that you set a height for those div containers to whatever is needed to make them equal using: height: YYpx; With "YY" being the amount needed.

I'll see what I can do with code you posted.