WordPress.org

1. lysie6211
   Member
   Posted 6 years ago #

   Can anyone tell me why the sidebar drops to bottom when you navigate from the index/frontpage to any other page on the blog? I've played with the CSS forever and can't figure out what is out of whack. Thanks in advance!

   Here's the site:
   http://paintingchef.com/

   And the CSS:
   body {background: #FFF;
   font: 12px "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

   a, a:visited, a:link {color: #900;}

   a:hover {text-decoration: none; background: #CF9;}

   a:active {background: #CFF99;}

   input, textarea {background: #FFF;}

   input:focus, textarea:focus {background: #FFF;}

   /*wrapper*/
   #wrapper {
   margin: 0px auto;
   width: 650px;
   background: #900 url(images/bg_main.jpg) repeat-y;}

   /*header*/
   #head {
   height: 273px;
   width: 650px;
   background: url(images/bg_head.gif);}

   #head div#blog_title {
   color: #9F6;
   position: relative;
   top: 0px;
   left: 20px;
   font: 2em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

   #head div#blog_title a {color: #9F6; text-decoration: none;}

   #head div#blog_title a:hover {background: transparent;}

   /* main elements*/
   #main {
   width: 420px;
   background: transparent;}

   #main h1, #main h2 {
   color: #900;
   font: normal 1.5em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

   #main h2 {
   font-size: 1.5em;}

   #main h1 a, #main h2 a {
   text-decoration: none;}

   #main p, #main div.navigation, #main ul, #main div.post, #main div.date, #main #searchform {
   margin: 5px 15px 5px 15px;
   font size: 2.0em ;
   font weight: normal;
   text-align: justify;
   line-height: 1.4em;
   padding-left: 15px;
   padding-right: 10px;}

   #main div.date {
   margin-bottom: 0;}

   /* sidebar */

   #sidebar {
   float: right;
   top: 300px;
   width: 220px;
   margin: 20px 0 15px 0 0
   padding: 25px 0 14px 20px;
   list-style: none;
   font: normal 1em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
   color: #900;
   background: url(images/bg_sidebar_main.jpg) repeat-y;}

   #sidebar h4 {
   margin: 0;
   padding: 25px 0 14px 20px;
   background: transparent url(images/bg_sidebar_head.jpg) no-repeat;
   font: normal 1.3em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

   #sidebar ul {
   margin: 0;
   padding: 0 0 40px 0;
   list-style: none;
   background: url(images/bg_sidebar_footer.jpg) no-repeat bottom left;}

   #sidebar ul li {
   background: transparent;
   padding: 0 0 3px 30px;}

   /* footer */
   #footer {
   width: 650px;
   clear: both;
   padding-top: 50px;
   padding-bottom: 30px;
   color: #9F6;
   background: #900 url(images/bg_footer.jpg) no-repeat;}

   #footer p {
   margin: 0 50px;
   font-size: 0.8em;
   line-height: 1.5em;}

   #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
   color: #9F6;
   background: transparent;}

   /* comments*/
   #commentform {
   margin-bottom: 40px;}

   #commentform input, #commentform textarea {
   width: 180px;
   margin:5px 5px 5px 5px;
   padding: 3px;
   color: #FFF;
   font: 1.0em/1.4em "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

   #commentform input[type=submit] {
   width: 20em;
   float: left;}

   #commentform label {
   display: block;
   padding-bottom: 3px;}

   #commentlist {
   margin:5px 5px 5px 5px;
   padding: 1px;
   line-height: 1.4em;
   list-style-type: none;}

   #commentlist li {
   padding: 1px;
   margin:5px 5px 5px 5px;}

   #commentlist li p {
   padding: 1px;
   margin:5px 5px 5px 5px;}

   #commentlist cite {
   display: block;
   padding: 3px;
   font-style: normal;
   margin:5px 5px 5px 5px;;
   font-weight: bold;
   margin-bottom: 3px;
   background: #CCFF99;}

   #searchform input[type=submit] {
   margin-top: 2px;}

   #comments_popup {
   margin:5px 5px 5px 5px;
   padding: 1px;
   background: #CCFF99;
   font: 12px "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

   #comments_popup h1#header {
   margin:5px 5px 5px 5px;
   padding: 5px;
   color: #360;
   background: #CCFF99;
   font: 2.5em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

   #comments_popup h1#header a {
   color: #9F6;
   text-decoration: none;}

   #comments_popup h1#header a:hover {
   background: transparent;}

   #comments_popup #main {
   width: 100%;
   }
   #comments_popup #main p, #comments_popup #main h2, #comments_popup #main #commentlist #postcomments #comments h2{
   margin:5px 5px 5px 5px;
   padding: 0;}

   #comments_popup #footer {
   width: 100%;
   padding: 5px 0;
   background: #900 none;

2. Beel
   Member
   Posted 6 years ago #

   Lots of threads on the causes of this:
   http://search.wordpress.org/sidebar+drops

   FYI: Posting lengthy code and your css here is frowned upon. We can see the CSS just fine visiting your site and lengthy code should be posted at pastebin.com

3. estjohn
   Member
   Posted 6 years ago #

   I did notice that in the HTML Source of the pages, the main one has
   <div id="wrapper">
   <div id="sidebar">
   and other div tags before it gets to "main"

   where the about page has
   <div id="wrapper">
   <div id="main">

   not sure if that will help any...

4. lysie6211
   Member
   Posted 6 years ago #

   My bad - sorry Beel.

   Thanks estjohn! That was exactly the problem. I was thinking it was something with the margins or something but once I changed the order of the calls it all came together!

5. Beel
   Member
   Posted 6 years ago #

   Good catch estjohn, not something for which I would have thought to look (and didn't notice).

6. estjohn
   Member
   Posted 6 years ago #

   You're welcome. Glad I could help :)
   I realy like your blog!

   -erica

Topic Closed

This topic has been closed to new replies.