View Full Version : Sidebar moved, post width increased magically?

12-12-2010, 05:15 AM
Hi! Ive been working on my website (http://energiacelestial.com)on wordpress for the past few weeks, and have noticed today that my right sidebar seems to have pushed itself across the page and my central column showing my recent posts has magically increased its width?

Im not sure if this is because of the update for the new wordpress or something that I have accidently tampered with?!! How can I resolve this, is this within the stylesheet? I checked on the W3 validation and I have 2 errors, but they dont seem to be related to unclosed div tags?

12-12-2010, 06:23 AM
Hi there suizka!

Just taking a look at your site; out of interest, did you design this template yourself?

The CSS seems bizarre;

What I think may be your problem is that the width of your 'content' div is set to 92%, whilst you're using fixed sizes in 'px' for the left and right hand side column.

First thing to try would be entering the stylesheet, finding the #content section and setting to a fixed with in px (whatever that needs to be).

Try that and if it doesn't work I'll try to come up with some other ideas; has this only happened since the WP update?

Let me know! :)

12-12-2010, 01:24 PM
Hello suizka,
This layout is a little complicated...
If you remove the margin:0 -240px 0 0; from #sidebar_right, the sidebar comes back in.

I can't imagine that negative right margin is a mistake though.
Try it and see if it works for you. #sidebar_right has two entries though, it gets margin from its entry in style.css but removing that doesn't change anything. You will also need to remove the same line from the attacahed styles in the head of the document.

12-12-2010, 06:19 PM
Hi! Thanks for your posts - I didnt create the theme myself, its called the F2 theme and I have only slightly modified it, such as the colors, fonts, header etc.

Yes its seems after the update it went all a bit wonky?!! I tried changing the post width from the % to 450px, I can see that it has now shortened the post but the column is still stuck all the way over on the right.

I also tried changing taking out the margin in the style.css and not sure where to find this on the attached styles in the head of the document? Any other suggestions?

12-12-2010, 06:45 PM
This layout looks like one of those old ones when they used to think the content needed to be presented in the markup before the left or right columns... for SEO.

Why so complicated? So many negative margins...
Where do you find the F2 theme at? Maybe a link to that will show the difference between a working version and yours.

I also tried changing taking out the margin in the style.css and not sure where to find this on the attached styles in the head of the document?
FireBug (http://getfirebug.com/) really helps when looking for this sort of thing.

#sidebar_left CSS can be found:

line #64 in the head of the document
line #110 in style.css

Also find .sidebar

line #241 in style.css
line #107 in style.css

That one in the head looks like this (highlighted in red) -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> </title>

<link rel="stylesheet" href="http://energiacelestial.com/wp-content/plugins/sitepress-multilingual-cms/res/css/language-selector.css?v=1.8.3" type="text/css" media="all" />

<link rel="stylesheet" href="http://energiacelestial.com/wp-content/themes/f2/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://energiacelestial.com/wp-content/themes/f2/print.css" type="text/css" media="print" />

<link rel="pingback" href="http://energiacelestial.com/xmlrpc.php" />

<link rel="alternate" type="application/rss+xml" title=" &raquo; Feed" href="http://energiacelestial.com/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title=" &raquo; Comments Feed" href="http://energiacelestial.com/?feed=comments-rss2" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://energiacelestial.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://energiacelestial.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='' href='http://energiacelestial.com' />
<meta name="generator" content="WordPress 3.0.3" />
<script type="text/javascript">var icl_lang = 'en';var icl_home = 'http://energiacelestial.com';</script>
<script type="text/javascript" src="http://energiacelestial.com/wp-content/plugins/sitepress-multilingual-cms/res/js/sitepress.js"></script>
<meta name="generator" content="WPML ver:1.8.3 stt:1,2;0;0;0" />

<style type="text/css">#lang_sel_list a.lang_sel_sel, #lang_sel_list a.lang_sel_sel:visited{color:#444444;}#lang_sel_list a:hover, #lang_sel_list a.lang_sel_sel:hover{color:#000000;}#lang_sel_list a.lang_sel_sel, #lang_sel_list a.lang_sel_sel:visited{background-color:#ffffff;}#lang_sel_list a.lang_sel_sel:hover{background-color:#eeeeee;}#lang_sel_list ul a.lang_sel_other, #lang_sel_list ul a.lang_sel_other:visited{color:#444444;}#lang_sel_list ul a.lang_sel_other:hover{color:#000000;}#lang_sel_list ul a.lang_sel_other, #lang_sel li ul a:link, #lang_sel_list ul a.lang_sel_other:visited{background-color:#ffffff;}#lang_sel_list ul a.lang_sel_other:hover{background-color:#eeeeee;}#lang_sel_list a, #lang_sel_list a:visited{border-color:#fff;} #lang_sel_list ul{border-top:1px solid #fff;}</style>

<!-- Fluid Blue customized styles generated by functions.php -->
<style type="text/css">
#header {
background-image: url('http://energiacelestial.com/wp-content/uploads/2010/11/energia6.jpg');
background-repeat: no-repeat;
background-color: #ffffff;
height: 238px;
#headerlogo {
visibility: hidden;
#hmenu li.hmenu_rss {
display: none;
#headerlogo h1 a {
color: #000000;
#headerlogo div.description {
color: #ffffff;
#container {
padding-right: 240px;
padding-left: 240px;
#wrapper {
border-right-width: 240px;
margin-right: -240px;
border-left-width: 240px;
margin-left: -240px;
#sidebar_right {
width: 200px;
margin-right: -240px;
font-size: 1em;
#sidebar_left {
width: 200px;
margin-left: -240px;
font-size: 1em;
.postentry p {
font-size: 1em;
.postentry ul {
font-size: 1em;
.postentry ol {
font-size: 1em;



Have a look at some proven 3-column layouts (http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html)

And have a look at how simple it can really be (http://nopeople.com/CSS%20tips/simple3column/index.html).

12-12-2010, 06:48 PM
Where do you find the F2 theme at? Maybe a link to that will show the difference between a working version and yours.

Ah yes, a wordpress theme. http://wordpress.org/extend/themes/f2