how do i move my sidebar to the right?

I find the web inspector in Safari to be easier to use than Firebug. Your site has a block quote that is too big, when I get back to my computer I’ll take a look.
/Peter

i don’t think the block quote is the issue, i took out the width and it’s exactly the same. if you look at some of the other pages on my site you can see it too. or maybe i’m the only one bugged by it lol.

The wide block quote is an iPad problem, it looks fine in Safari on the Mac.
/peter

still, back to the original question, i’d like to know how to move the sidebar over so it’s more centered within the white space between the story text and where the striped background begins. this is not a block quote question.

You could try adding a wider left margin to the first sidebar. It’s currently set to 15px, and you have room for more, so try

#firstsidebar{
   margin-left:30px;
}

The problem with the block quote is that the width is fixed in the .pformat style at 600px. This effects iPad and narrow windows on pc browsers.

/peter

you may need to make the first sidebar a bit narrower, the text is max 210px in size, so setting the width to 220px should work.

/peter

I got it to move with the following:

#firstsidebar { width: 220px; margin-left:80px !important }

The !important is needed because the rule for #main-wrapper > li is more specific and overrides the rule for firstsidebar.

/peter

The following gets rid of the !important and provides a more flexible layout that works better on the narrow browsers. Adjust the margin-right to control the placement.

#main-wrapper>li#firstsidebar { width: 220px;margin-right:20px;float:right; }

/peter

thank you ??

um, do i add the second bit of code in addition to the first bit or just get rid of the first bit?

um i don’t like how the text is pushed in with the window instead of resizing automatically like before. it is especially noticeable on the other pages like the main page where the text is pushed down below the pic instead of staying to the right of it.

You should use the last piece of code, it provides a more flexible layout. If you want automatic resizing you will need to replace the width in pixels with one that is based on percentages of the containing element. This is a lot of work.

There are media queries in your style sheets that let you change styles based on screen width, you need to add styles in there.

/peter

ok thanks!

hi, i just tried the following code, would this not work too?

#firstsidebar {padding-left: 30px;}

That will be similar to the first version I sent, but doesn’t need the !important since there is no padding specified on the li. Padding is inside the border while margin is outside. Some versions of IE get padding wrong. Padding also is part of the specified width while margin is not.
/Peter