Moving sidebar from right to left in TwentyTen problem

  • Hi all.

    Im new to WordPress, i started back at the start of the month. I am progressing well with my website but have recently come across an increasingly frustrating problem:

    I have searched how to move the side bar from the right to the left hand side of the page in the TwentyTen theme. This appears to work fine – in Firefox – but in IE its all jumbled and page content has moved behind the sidebar. I have looked how to fix it and tried numerous options but nothing seems to do the trick. Does anyone have any ideas? Any help will be greatly appricitated.

    This is the new code I have entered to move the sidebar:

    #container {
	float:right;
	margin-right:-260px;
        width: 100%;
		text-align:left;
}

#content {
	margin: 0 280px 0 20px;
}

#primary, #secondary {
float:left;
clear:left;
margin-left: 10px;
text-align:left;
}

    https://taptonparkgolfclub.co.uk/wp/

Viewing 5 replies - 1 through 5 (of 5 total)

  • Don’t edit the Twenty Ten theme! Your changes will be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

    Thread Starter sted999

    (@sted999)

    Sorry I had forgot to mention I had already done that. Should be all ok if its upgraded.

    I’ve worked out now that its down to the tabel I have on the homepage. Still not sure why it appears different on IE to Firefox though and cant seem to fix it. I have tried different column widths but it still shifts to the left in IE.

    Moderator t-p

    (@t-p)

    Try this (I have not tested it), see if it can work for you.

    /*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar left of content
*/

#container {
	float: right;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}
#primary,
#secondary {
	float: left;
	overflow: hidden;
	width: 220px;
}
#secondary {
	clear: left;
}

    This works, but does anyone know how to make the left hand sidebar narrower using the code from above I have a menu sat in it but just cant figure how to make the content area to the right wider and the sidebar to the left narrower.

    If you make the #primary & #secondary width wider (where it says width: 220px;), then edit the margins on #container and #content to fit (i.e. if you make the sidebars 40px wider, you want to reduce the margins on the other areas.)

    Also, I usually find it easier, if working on a fixed width site, to make the width static, so where it says ‘width: 100%’ on #container, I would change that to around 700px (worth trying if anyone has problems with the floats)

    Hope that helps ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Moving sidebar from right to left in TwentyTen problem’ is closed to new replies.