CSS help for my sidebar. It keeps moving up!

  • Unknown's avatar
    sitaramdass · Member ·

    I am having problems with my sidebar. It seems to move up and down depending on the page height. Also, the sidebar does not show up when the page is minimized.

    Lastly, when I have more than one widget on my sidebar (right now there is 3) it pushes my footer image farther down the screen, which creates a black space after my background image.

    I am using the elegant grunge theme, which I have modified quite a bit on css.

    THANK YOU!

    I would love it if the sidebar would stop moving up and down.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jasondayne · Member ·

    Hi there!

    Thanks for your thorough description here especially the “I have modified quite a bit on css” bit.

    My CSS is pretty good, but I don’t see an easy way to fix this. The sidebar is currently positioned relative but whatever element it’s relating to is not moving with the screen size so it’s impossible even with a percentage to get it to work right on all screen sizes. I can get it looking good for one size but the second you adjust your browser it will look terrible. I can make it absolute but then the other elements start overlapping with it which looks worse. And even if get the sidebar to position correctly with a margin-position-percentage combo, the other elements aren’t moving correctly and there’s overlap. :

    I like challenges and would be willing to see if we can find some kind of creative compromise to make this happen. Before I put my scuba gear on and dive down into the code, I have a few questions:

    Could you post all the CSS modifications you’ve made so far?

    Also, what modification did you make that caused this problem?

    It looks like you’ve made all the elements “display: block”. What was the reasoning behind that?

    Kind regards,
    Jason

  • Unknown's avatar
    sitaramdass · Member ·

    Thanks for your help!

    I don’t know what caused it to happen. The reason why is that when I made the changes my pages were all shorter lengths. As I made some of my other pages longer, I did not notice that the side bar was moving down.

    One thing I can say is that, if I change the sidebar width to 1 px, it won’t move down the page. It stays where it is, but of course this causes other problems. If I only use the twitter widget it still displays, and is in the right place. In the past the facebook widget displayed as well. Thus, I used this temporary fix for a while, using only the facebook and twitter widgets, but now the facebook widget does not display, so I am looking for a real solution.

    I took a look at the css, and I am pretty sure I never changed the display to block. Could it have been that way?

    Here is what I have changed, but I am pretty sloppy with my CSS, meaning not all of these things are different from the original 

    body {
	color: white;
	font-family: "Palatino", "Georgia", "Baskerville", serif;
	margin: 0;
	padding: 0;
}

a {
	color: gold;
}

#content-body {
	float: right;
	width: 759px;
	padding: 0 20px;
}

h1,h2 {
	color: orange;
	font-size: 2.4em;
	font-weight: normal;
	line-height: 1em;
	margin: 0 0 .5em;
}

.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6 {
	color: orange;
	font-weight: normal;
	line-height: 1.3em;
	margin: 0 0 10px;
}

h2 a {
	text-decoration: none;
	color: orange;
}

.nav-previous a,.nav-next a {
	font-size: .875em;
	color: orange;
}

.sticky {
	color: orange;
	background: url('images/sticky-back.png') center center no-repeat;
}

.post .post-author {
	color: orange;
	font-size: 14px;
}

.post .post-author a {
	color: orange;
	font-size: 14px;
	text-decoration: none;
}

.post .post-author a:hover {
	color: red;
}

.post .info {
	color: orange;
	font-size: .8em;
}

.post .post-date {
	background-image: url('no.png');
	width: 136px;
	height: 73px;
	text-align: center;
	float: right;
	font-size: 13px;
	line-height: 26px;
	color: orange;
	font-weight: bold;
	margin-right: -8px;
}

.post .post-date a,.post .post-date span {
	text-decoration: none;
	margin-left: 4px;
	margin-top: 8px;
	display: inline-block;
	text-align: center;
	color: orange;
}

.post .post-date a:hover {
	color: red;
}

.metadata {
	margin-top: 40px;
	text-align: center;
	font-size: .7em;
	color: orange;
}

.metadata a {
	text-decoration: none;
}

#entry-author-info h2 {
	font-size: 1.5em;
	color: orange;
}

#sidebar {
	font-size: .875em;
	float: left;
	position: relative;
	left: -250px;
	top:-800px;
	width: 250px;
}

.sidebar-content #content-container {
	background-image: url('images/body-no-sidebar.png');
}

#header-wrap {
	background: url('http://kensandin.files.wordpress.com/2013/10/headerwrap5.jpg') repeat-x center top;
	position: relative;
}

#header-image {
	display: block;
	margin-left: 50%;
	position: absolute;
	top: 14px;
	left: -400px;
	width: 800px;
	height: 160px;
}

#header {
	background: url('none') no-repeat center;
	height: 216px;
	position: relative;
}

.no-sidebar #header {
	background-image: url('none');
}

.sidebar-content #header {
	background-image: url('none');
}

#header h1,#header h2 {
	float: center;
	font: 2.2em / 169px "Georgia", "Baskerville", serif;
	margin: 0 0 0 .5em;
	position: relative;
	z-index: 11;
}

#menu a {
	color: orange;
	display: block;
	line-height: 3em;
	padding-right: 50px;
	text-decoration: none;
	font: 1.3em / 40px serif;
}

#menu li:hover > a,#menu ul ul :hover > a {
	color: #d43535;
}

#menu ul li:hover > ul {
	background: #191919;
	display: block;
}

#menu ul li.current_page_item > a,#menu ul li.current-menu-ancestor > a,#menu ul li.current-menu-item > a,#menu ul li.current-menu-parent > a {
	color: white;
}

* html #menu ul li.current_page_item a,* html #menu ul li.current-menu-ancestor a,* html #menu ul li.current-menu-item a,* html #menu ul li.current-menu-parent a,* html #menu ul li a:hover {
	color: white;
}

#content {
	margin: -55px auto;
	width: 800px;
}

#content-container {
	background: url('http://kensandin.files.wordpress.com/2012/07/backgroundmaybe3.jpg') center top no-repeat;
	margin: 10px auto;
}

.no-sidebar #content-container {
	background-image: url('none');
}

.hr {
	background-color: none;
	background-image: url('no.png');
	border: 0;
	clear: both;
	color: none;
	margin: -4px auto 0;
	width: 0;
	height: 0;
}

#footer-wrap {
	background: url('http://kensandin.files.wordpress.com/2013/10/bottomwrap.jpg') no-repeat center top;
	padding: 91px 0 30px;
	width: 100%;
}

#footer #subscribe-rss a {
	background-image: url('images/rss.png');
	display: none;
	margin-top: -5px;
	margin-left: -115px;
	text-indent: -999em;
	width: 149px;
	height: 126px;
}

#footer-wrap-outer {
	background: url('no.gif') repeat-x 0 325px;
	margin-top: -10px;
}

#footer .widget {
	margin-right: -152px;
	margin-left: -152px;
	margin-bottom: -70px;
}

#footer {
	font-size: .6em;
	line-height: 1.1em;
}

#footer .widget-wrap {
	float: left;
	width: 264px;
	margin-bottom: 36px;
	margin-top: -120px;
}

#footer a {
	color: red;
}

#footer h2 {
	color: white;
	font-size: 1.8em;
	margin-bottom: 15px;
	font-weight: normal;
	font-style: normal;
}

.archive .page-title {
	visibility: hidden;
}

.archive .page-title span {
	visibility: visible;
	float: left;
}

#commentlist li .comment-content,#commentlist li .before-comment,#commentlist li .after-comment,#commentlist li .after-comment div {
	background: none no-repeat top right;
}

#commentlist li.bypostauthor .comment-content,#commentlist li.bypostauthor .before-comment,#commentlist li.bypostauthor .after-comment,#commentlist li.bypostauthor .after-comment div {
	background-image: none;
	color: #000;
}

#commentlist li.trackback .comment-content,#commentlist li.trackback .before-comment,#commentlist li.trackback .after-comment,#commentlist li.trackback .after-comment div,#commentlist li.pingback .comment-content,#commentlist li.pingback .before-comment,#commentlist li.pingback .after-comment,#commentlist li.pingback .after-comment div {
	background-image: none;
	color: #000;
}
  • Unknown's avatar
    jasondayne · Member ·

    Thanks! This is helpful.

    No need to be ashamed of your CSS! You’re work with the identifiers is quite impressive actually! And you didn’t use “!important” which can be quite difficult when trying to override existing code. Also the order is well laid out.

    Only comment might be this: there is no “float: center” float is right, left, or none.

    Ok, I think I made a step in the right direction. Add the following and let me know what you think, if that’s what you are looking for or not. When the screen gets too narrow (on mobile, etc.) the sidebar is going to get pushed to the bottom. We can change that if you’d like with a media file so that it’s more spread out at the bottom or everything just shrinks even more. etc. But this should look good for any laptops.

    #content {
    width: 100%;
    }

    #content-body {
    width: 65%;
    }

    #sidebar {
    position: static !important;
    margin: 1%;
    }

    ALSO: remove left and top properties and values from #sidebar

    Let me know what you think.

    Kind regards,
    Jason

  • Unknown's avatar
    sitaramdass · Member ·

    Brilliant! Thank you so much! I made the width of my sidebar smaller, so I think that your solution will now work for tablets as well. I’m not too concerned with phones. This makes me so happy. If you were my neighbor I would bake you some brownies.

  • Unknown's avatar
    jasondayne · Member ·

    Haha! I love it! I’m so glad to make your day!

    Best to you on your site!
    —Jason

  • The topic ‘CSS help for my sidebar. It keeps moving up!’ is closed to new replies.