View Full Version : Trouble with left sidebar text widget alignment

Feb 11th, 2010, 11:37 PM
I'm having alignment issues. I am using Falkner press wordpress theme. the demo is here: http://54800.com/

My issue is that when I add a text widget to the left sidebar (the inner sidebar) it aligns to the right. The problem is that both the right and left sidebars are defined by one text widget code geared to the right sidebar. here is the code: I have isolated as causing the problem.

.textwidget {padding-left:35px;text-align:justify;width:230px;}

When I change the padding to right, the left sidebar is exactly how I want it but then the right sidebar is misaligned and when i change it back to left, the right is perfect and the left is misaligned. Is there a way to define or code the left sidebar so that i have a textwidget with the padding to the right. and not have it affect my right side bar.
the code pertaining to the the left and right text widgets in the sidebar are:

left sidebar:

.widget {width:156px;background:#111114 url(images/widget-bg.jpg) no-repeat top left ; float:left;display:inline;padding:15px;margin-bottom:10px;font-size:12px}
.widget h2 {font-size:14px;font-weight:bold;margin:0 0 15px 20px;;}
.widget ul {list-style:url(images/bullet.png) inside;padding-left:5px}
.widget li {font-size:12px;line-height:14px;margin-bottom:5px}
.widget a {color:#6E7A74;text-decoration:none}
.widget a:hover {color:#87BC3F;}

right sidebar

.right-widget{background:transparent url(images/right-bg.png) repeat-y top left;width:275px;float:left;display:inline;font-size:12px;padding-bottom:10px;}
.right-heading {background:url(images/right-head.png) ;height:39px;padding:25px 0 0 20px; font-weight:bold;width:255px;color:#454D49}
.right-widget ul {list-style:url(images/bullet.png) outside;padding-left:25px;margin-left:30px;}
.right-widget li {font-size:12px;line-height:14px;margin-bottom:5px}
.right-widget a {color:#6E7A74;text-decoration:none}
.right-widget a:hover {color:#87BC3F;}
.textwidget {padding-left:35px;text-align:justify;width:230px;}

While this code is coded for the right side bar, it also affects the left sidebar and is padding the left sidebar to the left when it should be padded to the right.( padding to the left causes text to overflow) I just want to know if someone is able to help me fix the code posted above so that I can have two separate codes, one for the right and left sidebars or to help me create an identical code tailored to just the left sidebar so that I can pad the right side. If there is a way to word this code so that it can contine to work for both sidebars but allow me to pad the left sidebar to the right and the right to the left I would appreciate it.

Any help you can offer will be greatly appreciated.

Feb 13th, 2010, 02:07 AM
You have to make sure that the pixels add up on the right side bar, you have an list that has padding outside.
.right-widget ul {list-style:url(images/bullet.png) outside;padding-left:25px;margin-left:30px;}
This could be your problem, without seeing the site and where it relates to it is hard to tell.