I have a Wordpress blog at http://www.foursevens.com/needhelp/ -- It's
just a shell of a site right now, as you can see. Yes, it's ugly.

What I need help with is this: Somehow, either the DIV structure or
the CSS has gotten munged and the sidebar now appears at the bottom of
the page, not on the right.

I need to know how to fix this.

Hi rservice-ga,

We'll need to take this step by step, because there are multiple problems here.

First, you need to make the sidebar float to the right. Load your
stylesheet into your editor and find this part:

#sidebar {
          position:relative;
          left:20px;
          top:20px;
          width:120px;
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	border-left: 1px dotted #8f1f2e;
	border-spacing: 3px;
	padding-left: 10px;
}

Add two lines at the end (just before the closing brace) so that it
looks like this:

#sidebar {
          position:relative;
          left:20px;
          top:20px;
          width:120px;
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	border-left: 1px dotted #8f1f2e;
	border-spacing: 3px;
	padding-left: 10px;
        float: right;
        clear: both;
}

That puts the sidebar on the right. But it's on the right of the wrong thing!

Edit your theme's main index template (probably called index.php).
Find a line that says:

<?php get_sidebar(); ?>

and move this line above the WordPress loop. As I haven't seen your
template, I can't tell you exactly where this should go, but it
probably goes after the call to get_header() and before the "div" that
is just before the call to have_posts().

That should move the sidebar towards the top-right of the page. But it
may not look right, because in your CSS the <div> opening tags are not
matched properly with the </div> closing tags. Have a look in your
template file for the line starting like this:

   <?php the_content(

You should probably have a line with <div ...> above it and a line
with </div> below it. Is the </div> missing? If so, put it in and let
me know how it's going so far.

If this doesn't make sense, or if your template and stylesheet are
sufficiently different that these instructions don't help, then I need
to see a copy of your template file (index.php).

If you don't have a convenient place to post it, you can use a
pastebin (a public place to post text files). There's one at
http://pastebin.com/ which allows you to post a text file, then you
can tell me the URL that it posts the text file to.

Please use the "request clarification" function of Google Answers to
tell me whether these instructions have enabled you to solve the
problem, or whether you require further help.

Regards,
eiffel-ga

---

Request for Answer Clarification by rservice-ga on 17 Jun 2006 13:39 PDT

Hi eiffel-ga,

Thanks for the work. Looks like we're getting very close. I made the
two changes you suggested. Have a look at
http://www.foursevens.com/needhelp/ and you can see what it looks like
now.

It looks right in Firefox (both Win and Mac) and in Safari (Mac) --
but in IE6 on Windows (which most of my audience will be on), the
sidebar now appears in more or less the correct position, but the main
content begins on the left down the page at the end of the sidebar.

I'm guessing there's a float solution? I'm new to it (don't know what
float or clear does -- would love a quicky explanation).

Also, how do I move the sidebar about 20px left?

I recognize this is asking extra work, these questions, and I'll tip
for the extra work.



<?php get_header(); ?>

<?php get_sidebar(); ?>


	<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post(); ?>

<?php the_date('','<h2>','</h2>'); ?>
				
<div class="post" id="post-<?php the_ID(); ?>">

<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent
Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>


<p class="postmetadata">

<?php comments_popup_link('<b>Have <u>your</u> say now</b> &#187;',
'<b>One comment so far. Add yours now</b> &#187;', '<b>% comments so
far. Add yours now</b> &#187;'); ?></b> | Read related stories in
<?php the_category(', ') ?>.<?php edit_post_link('Edit', '', '.'); ?>

</p>


<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
		
	
		<?php endwhile; ?>

		<div class="navigation_bottom">
			<div class="alignleft"><?php next_posts_link('&laquo; Read older
posts') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries
&raquo;') ?></div>
		</div>
		
	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

	<?php endif; ?>

	</div>

<?php get_footer(); ?>

---

Request for Answer Clarification by rservice-ga on 18 Jun 2006 12:18 PDT

Hello?

As I mentioned, your solution did work, but basically only swapped the
problem. Please help...

---

Request for Answer Clarification by rservice-ga on 18 Jun 2006 12:20 PDT

I have tried to use a float/clear solution and now it works fine in
IE6, but in Firefox (both platforms), the sidebar is on the right at
the top (correct position) while the main content is at the bottom on
the left. :(

---

Clarification of Answer by eiffel-ga on 18 Jun 2006 13:34 PDT

Hi rservice-ga,

Sorry about the delay responding to your request for clarification; I
am only online at certain times during the weekend.

First, a quick overview of what "float" and "clear" do.

If you "float" something to the left or right, it sticks that item
against the left or right edge of its container. The content after the
floated item gets put into the leftover space beside the floated item
(or floated items, because you can have more than one).

When you get to a part of your content that should no longer be in the
leftover space beside the floated items, you use "clear". That means
that the content will start below any currently-active floats.

Having said that, there are a few cases where Internet Explorer 6 has
different behaviour from other browsers including Firefox. I run the
Linux operating system, so I can't test using IE, but I think I see a
way to work around the layout problem by removing a troublesome float
as follows:

Start from your stylesheet as it was at the time of your first request
for clarification.

Find the following code in your stylesheet:

.narrowcolumn {
	float: left;
	padding: 0 0 40px;
	margin: 0px 0 0;
	width: 480px;
}

Remove the "float: left;" line completely, so that it looks like this:

.narrowcolumn {
	padding: 0 0 40px;
	margin: 0px 0 0;
	width: 480px;
}

This shouldn't change how it looks in Firefox, but I'm hoping it will
solve the problem in IE.

You also want to move the sidebar to the left by 20 pixels. As it
happens, that's how much the current stylesheet is moving it to the
right. Find the part of your stylesheet that looks like this:

#sidebar {
          position:relative;
          left:20px;
          top:20px;
          width:120px;

and remove the line that says "left:20px;" so that it looks like this:

#sidebar {
          position:relative;
          top:20px;
          width:120px;

Then, please let me know how this is working...

Regards,
eiffel-ga

Excellent! Thanks for the extra help!

Thanks rservice-ga for the kind tip.

Regards,
eiffel-ga