Enna Isilee
03-31-2012, 06:40 PM
Working on this layout: http://squeakytestblog.blogspot.com/
As you can see, the sidebar background ends with the content. I'd like to make it so that the background continues down as far as the content of the posts, not the sidebars. Here's the code I'm using, the red part is what I want to extend to the bottom. I've read that you should add a height:100% tag, but I don't know where to add it. Any help is appreciated!
body {
background: #8DCFE7 url('http://i851.photobucket.com/albums/ab75/ablogtobragabout/Emily%20E/top-bg.png') repeat-x center top;
margin:0;
color:#353535;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:#318D9F;
text-decoration:none;
}
a:visited {
color:#318D9F;
text-decoration:none;
}
a:hover {
color:#318D9F;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header */
#header-wrapper {
background: url(http://i851.photobucket.com/albums/ab75/ablogtobragabout/Emily%20E/header.png);
position: absolute;
width:1000px;
height:358px;
margin-top:-0px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
width: 1000px;
height: 200px;
margin: 0px;
padding: 0px;
float: left;
clear: both;
color:#ff2093;
}
#header h1 {
padding-top:70px;
margin-right:380px;
text-align:right;
line-height:1.6em;
text-transform:none;
letter-spacing:.2em;
font-size: 38px;
font-family:"Arial", serif;
color:#91C810;
display:none;
}
#header a {
color:#91C810;
text-decoration:none;
}
#header a:hover {
color:#91C810;
}
#header .description {
margin-right:380px;
text-align:right;
margin-top:-20px;
text-transform:none;
letter-spacing:.05em;
line-height: 1.4em;
font-size: 12px;
font-family:"Trebuchet MS",;
color: #000000;
display:none;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper */
#outer-wrapper {
width:1000px;
margin:0 auto;
padding:0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/wrapper.png') repeat-y;
text-align:$startSide;
font: $bodyfont;
}
#content-wrapper {
width: 600px;
float: left;
margin: 0px;
padding: 0px;
}
#main-wrapper {
color:#333333;
width: 600px;
float: left;
margin: 0px;
padding-left: 0px;
padding-right:0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/Wrapper2.png') repeat-y center top;
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 */
color: #333333;
}
h2.date-header {
text-align:center;
line-height:1.6em;
text-transform:none;
letter-spacing:.13em;
font-size: 14px;
font-family:"Arial", serif;
color:#91C810;
}
/* Posts */
.post {
background: url(http://i851.photobucket.com/albums/ab75/ablogtobragabout/Emily%20E/postdivider.png)no-repeat bottom center;
position: relative;
margin:.5em 0 1.5em;
border-bottom:0px dashed #71545D;
padding-bottom:50px;
padding-top:0px
}
.post h3 {
text-align:center;
line-height:1.6em;
text-transform:none;
letter-spacing:.16em;
font-size: 20px;
font-family:"Arial", serif;
color:#91C810;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-align:center;
line-height:1.6em;
text-transform:none;
letter-spacing:.16em;
font-size: 20px;
font-family:"Arial", serif;
color:#91C810;
}
.post h3 strong, .post h3 a:hover {
color:#91C810;
}
.post p {
margin: 0px 0px 8px 0px;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.post img {
padding:4px;
border:0px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-footer img {
border: 0;
}
#comments-block .comment-body p {
margin:5px 0px;
font-size: 11px;
}
.deleted-comment {
color:gray;
}
.feed-links {
clear: both;
font-size: 12px;
padding: 5px;
text-align: center;
background: #c4a370;
margin: 5px 0px;
}
#blog-pager-newer-link {
font-size: 10px;
float: left;
}
#blog-pager-older-link {
font-size: 10px;
float: right;
}
#blog-pager {
font-size: 10px;
text-align: center;
}
/* Sidebar */
#sides {
width: 400px;
float: right;
margin: 0px;
padding: 0px;
}
#sides-top {
width: 400px;
padding: 355px 0px 0px 0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/TopSide.png') repeat;
margin: 0px;
clear: both;
}
#sidebar-wrapper {
width: 200px;
float: right;
margin: 0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/Sidebar.png') repeat;
position: absolute;
right: 129px;
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 */
}
#sidebar-wrapper2 {
width: 200px;
float: left;
margin: 0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/Sidebar.png') repeat;
padding: 0px;
position: absolute;
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 */
}
#sides-top h2 {
margin: 0px;
padding: 0px;
color: #91C810;
background: url() no-repeat;
font-size: 15px;
letter-spacing: -1px;
text-align: center;
height: 20px;
padding: 10px 20px;
line-height: 1.5empx;
font-family: Georgia, "Times New Roman", Times, serif;
}
#sidebar-wrapper h2, #sidebar-wrapper2 h2 {
margin: 0px;
padding: 0px;
color: #91C810;
background: url('') no-repeat;
font-size: 15px;
letter-spacing: -1px;
text-align: center;
height: 20px;
padding: 10px 20px;
line-height: 35px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.sidebar {
font-size: 12px;
margin:0px;
padding:0px;
line-height: 15px !important;
}
.sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.sidebar li {
margin: 1px 0px;
padding: 3px 10px!important;
}
.sidebar .widget {
margin: 0px;
padding: 0px;
}
.sidebar .widget-content {
margin: 0px;
padding: 0px 15px;
}
.main .widget {
margin:6px 0px 2px 0px;
padding:10px;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile */
.profile-img {
margin:6px 0px;
padding: 0px;
float: right;
}
.profile-data {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
color: #765023;
text-transform: uppercase;
font-weight: bold;
}
.profile-datablock {
margin:2px 0px;
}
.profile-textblock {
margin: 4px 0px 8px 0px;
}
.profile-link {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
color: #765023;
text-transform: uppercase;
font-size: 9px;
}
/* Footer */
#footer {
width: 100%;
clear:both;
color: #dce7b5;
margin:0px;
padding: 14px 0px;
background: #765023;
font-size: 11px;
text-align: center;
}
#footer p {
margin: 5px 0px;
}
#footer a {
color: #ebe0d1;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin: 0px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='content-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Layout Test Blog (Header)' type='Header'/>
</b:section>
</div>
<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:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div> <!-- end content-wrapper -->
<div id='sides'>
<div id='sides-top'> <b:section class='sidebar' id='sidetop' preferred='yes'>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
</b:section> </div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Text2' locked='false' title='Text' type='Text'/>
</b:section>
</div>
<div id='sidebar-wrapper2'> <b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='Text' type='Text'/>
</b:section> </div>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
As you can see, the sidebar background ends with the content. I'd like to make it so that the background continues down as far as the content of the posts, not the sidebars. Here's the code I'm using, the red part is what I want to extend to the bottom. I've read that you should add a height:100% tag, but I don't know where to add it. Any help is appreciated!
body {
background: #8DCFE7 url('http://i851.photobucket.com/albums/ab75/ablogtobragabout/Emily%20E/top-bg.png') repeat-x center top;
margin:0;
color:#353535;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:#318D9F;
text-decoration:none;
}
a:visited {
color:#318D9F;
text-decoration:none;
}
a:hover {
color:#318D9F;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header */
#header-wrapper {
background: url(http://i851.photobucket.com/albums/ab75/ablogtobragabout/Emily%20E/header.png);
position: absolute;
width:1000px;
height:358px;
margin-top:-0px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
width: 1000px;
height: 200px;
margin: 0px;
padding: 0px;
float: left;
clear: both;
color:#ff2093;
}
#header h1 {
padding-top:70px;
margin-right:380px;
text-align:right;
line-height:1.6em;
text-transform:none;
letter-spacing:.2em;
font-size: 38px;
font-family:"Arial", serif;
color:#91C810;
display:none;
}
#header a {
color:#91C810;
text-decoration:none;
}
#header a:hover {
color:#91C810;
}
#header .description {
margin-right:380px;
text-align:right;
margin-top:-20px;
text-transform:none;
letter-spacing:.05em;
line-height: 1.4em;
font-size: 12px;
font-family:"Trebuchet MS",;
color: #000000;
display:none;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper */
#outer-wrapper {
width:1000px;
margin:0 auto;
padding:0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/wrapper.png') repeat-y;
text-align:$startSide;
font: $bodyfont;
}
#content-wrapper {
width: 600px;
float: left;
margin: 0px;
padding: 0px;
}
#main-wrapper {
color:#333333;
width: 600px;
float: left;
margin: 0px;
padding-left: 0px;
padding-right:0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/Wrapper2.png') repeat-y center top;
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 */
color: #333333;
}
h2.date-header {
text-align:center;
line-height:1.6em;
text-transform:none;
letter-spacing:.13em;
font-size: 14px;
font-family:"Arial", serif;
color:#91C810;
}
/* Posts */
.post {
background: url(http://i851.photobucket.com/albums/ab75/ablogtobragabout/Emily%20E/postdivider.png)no-repeat bottom center;
position: relative;
margin:.5em 0 1.5em;
border-bottom:0px dashed #71545D;
padding-bottom:50px;
padding-top:0px
}
.post h3 {
text-align:center;
line-height:1.6em;
text-transform:none;
letter-spacing:.16em;
font-size: 20px;
font-family:"Arial", serif;
color:#91C810;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-align:center;
line-height:1.6em;
text-transform:none;
letter-spacing:.16em;
font-size: 20px;
font-family:"Arial", serif;
color:#91C810;
}
.post h3 strong, .post h3 a:hover {
color:#91C810;
}
.post p {
margin: 0px 0px 8px 0px;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.post img {
padding:4px;
border:0px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-footer img {
border: 0;
}
#comments-block .comment-body p {
margin:5px 0px;
font-size: 11px;
}
.deleted-comment {
color:gray;
}
.feed-links {
clear: both;
font-size: 12px;
padding: 5px;
text-align: center;
background: #c4a370;
margin: 5px 0px;
}
#blog-pager-newer-link {
font-size: 10px;
float: left;
}
#blog-pager-older-link {
font-size: 10px;
float: right;
}
#blog-pager {
font-size: 10px;
text-align: center;
}
/* Sidebar */
#sides {
width: 400px;
float: right;
margin: 0px;
padding: 0px;
}
#sides-top {
width: 400px;
padding: 355px 0px 0px 0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/TopSide.png') repeat;
margin: 0px;
clear: both;
}
#sidebar-wrapper {
width: 200px;
float: right;
margin: 0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/Sidebar.png') repeat;
position: absolute;
right: 129px;
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 */
}
#sidebar-wrapper2 {
width: 200px;
float: left;
margin: 0px;
background: url('http://i1213.photobucket.com/albums/cc470/SqueakyBooks/ERR/Sidebar.png') repeat;
padding: 0px;
position: absolute;
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 */
}
#sides-top h2 {
margin: 0px;
padding: 0px;
color: #91C810;
background: url() no-repeat;
font-size: 15px;
letter-spacing: -1px;
text-align: center;
height: 20px;
padding: 10px 20px;
line-height: 1.5empx;
font-family: Georgia, "Times New Roman", Times, serif;
}
#sidebar-wrapper h2, #sidebar-wrapper2 h2 {
margin: 0px;
padding: 0px;
color: #91C810;
background: url('') no-repeat;
font-size: 15px;
letter-spacing: -1px;
text-align: center;
height: 20px;
padding: 10px 20px;
line-height: 35px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.sidebar {
font-size: 12px;
margin:0px;
padding:0px;
line-height: 15px !important;
}
.sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.sidebar li {
margin: 1px 0px;
padding: 3px 10px!important;
}
.sidebar .widget {
margin: 0px;
padding: 0px;
}
.sidebar .widget-content {
margin: 0px;
padding: 0px 15px;
}
.main .widget {
margin:6px 0px 2px 0px;
padding:10px;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile */
.profile-img {
margin:6px 0px;
padding: 0px;
float: right;
}
.profile-data {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
color: #765023;
text-transform: uppercase;
font-weight: bold;
}
.profile-datablock {
margin:2px 0px;
}
.profile-textblock {
margin: 4px 0px 8px 0px;
}
.profile-link {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
color: #765023;
text-transform: uppercase;
font-size: 9px;
}
/* Footer */
#footer {
width: 100%;
clear:both;
color: #dce7b5;
margin:0px;
padding: 14px 0px;
background: #765023;
font-size: 11px;
text-align: center;
}
#footer p {
margin: 5px 0px;
}
#footer a {
color: #ebe0d1;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin: 0px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='content-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Layout Test Blog (Header)' type='Header'/>
</b:section>
</div>
<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:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div> <!-- end content-wrapper -->
<div id='sides'>
<div id='sides-top'> <b:section class='sidebar' id='sidetop' preferred='yes'>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
</b:section> </div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Text2' locked='false' title='Text' type='Text'/>
</b:section>
</div>
<div id='sidebar-wrapper2'> <b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='Text' type='Text'/>
</b:section> </div>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>