The format assumes that the main column will take up only part of the screen, and then the sidebar will float up to the right of that. The main column is being pushed to the right by your pic, and thus, there's no room for the sidebar to float up.

Options:
A. Get rid of the image.

B. Make the image stop doing that.

To make the image stop pushing the main column over, try this:

1. Replace the IMG tag that yo'uve got with this one:

<img src="http://foreverpurple.com/images/Oct13avatar.jpg" class="leftmargin" />

Note the /> That's because an IMG tag doesn't have a closing tag (</img>) and XHTML requires that all tags be closed. The /> says "This tag is closing right now."
Also, this removes the "align = left" which is not XHTML compliant. In XHTML, all attributes are lowercase, and contained in double-quotes. (So, it would be 'align="left"'.) And, the "align" attribute is deprecated, as are almost all style-related tags that don't link up to a CSS style rule.
(For more on XHTML and CSS, check out http://www.w3schools.com )

2. In your CSS (custom.css), find the part that says:

/* Styles for posts */
.bPosts {
	vertical-align: top;
	float: left;
	width: 76%;
	background: #eee;
}

and change it to this:

/* Styles for posts */
.bPosts {
	vertical-align: top;
	float: left;
	width: 76%;
	background: #eee;
	clear:left;
}

Note the added "clear:left" rule. That says, "If there are any floating elements to the left, put this below them, and don't let them hang over this item."

If you do that, then your bPosts section (i.e., the main column) won't start until after your pic (because the IMG will be a "float:left" element), and thus, it will be flush with the left-hand side of the screen, and your sidebar will fit on the right.

Also, if any friendly moderators feel ambitious, I think that this thread should be moved to the Client-Side Stuff forum, since it's really a XHTML/CSS problem. Thanks.

It's not doing the bad thing with the picture in IE - that problem shows up in Mozilla. In IE the sidebar item for "womenbloggers" is taking up more than the 23% you've alloted to the sidebar. I'm sort of assuming that the javascript for that item is forcing a certain pixel width because when I went from 1024 by whatever up to the next screen resolution everything popped into place.

Check it by first removing that component and seeing what your blog looks like. If your sidebar shifts up then you know that's the thing making it hurt. You can consider taking it out of it's bSideItem div (thus no border), or rebalancing your percentages until it fits. Example would be 71% and 28%, but it will only work for people with your screen resolution. Once you find the smallest main side percentage that works for you go ahead and drop it 2 more points on principal. Another idea is to leave 2 percent unaccounted for. Instead of 76 & 23 go to 75 & 23, but you still have to work the 75 down until the sidebar pops into place.

Best of luck!

I just figured that out too!
After I posted I remembered that the last thing I did was that webring.
Then I went to my wordpress blog and it was messed up too. I moved the webring thing and now its fixed. I can't get the text very big though so that it stands out more. I guess I'll have to try it in different places.
Thanks for the quick help guys!!

The reason the pic "doesn't do the bad thing" in IE is because IE is broken. Mozilla is showing it like it should look, according to the CSS specification. According to the rules that you've specified in your CSS and XHTML, it should look exactly as it does.
See http://www.complexspiral.com/publications/containing-floats/ for more info. My fix is an application of the principles explained on that page.

Heyhey!

I just found a brilliant way to do this without adding any structural tags!

http://www.positioniseverything.net/easyclearing.html

It's so silly simple, too, I don't know why I didn't think of it. Just confirms my belief that the best examples of genius always seem obvious once you see them :)

The only drawback is that you have to add some JS to make it work right for IE Mac 5.x. But that's a very rarely used browser these days, so if it looks broken in Mac IE, I'm tempted to just shrug, and skip the JavaScript.

having this same issue with another blog. I removed the two images that I thought might be the problem but its still not working.

I'm having a layout problem in Internet Explorer. I didn't realize it was messed up again until today. I'm not sure what's wrong. It looks fine in Opera.

any ideas?

www.foreverpurple.com/blog/crab_blog.php

It looks broken in Firefox, too.

The problem is that the picture of the crab is a big ol' thing, and pushing everything around.

Try wrapping the image and the webring link in a div, and putting

<div class="breaker"></div>

after them.

I tried it with each of them wrapped in that tag and I tried with both of them in the same tag, I resized the pic. Still not working :(

Okay.

I think I have it fixed now. I moved the stuff I added on (the food menu) , down. I think I had it inside a div tag or something. Not entirely sure. It SEEMS to be fixed now. At least in IE.

thanks!

Ah. You're talking about a different problem (That did actually correct an issue that I was seeing in both IE6 and FF.)

As for the other stuff, if you were to [url=http://validator.w3.org/check?uri=http%3A%2F%2Fwww.foreverpurple.com%2Fblog%2Fcrab_blog.php]validate the code that you've added[/url], then it won't be any mystery why it's crazy.

Here's what I'm seeing

...
<li><a href="http://www.foreverpurple.com/blog/htsr..." title="Login if you have an account...">Just Login</a></li>
</ul>
</dd>
</dl>

<P>
<br>
<P>
<div id="sidebar">
<div id="subnav">
<b>Crab Menu:</b><br>
<P>...

You'll notice, if you look at the source, that there's a very nice orderly definition list (DL) which sorts out all the items and attaches them with the associated header. I chose a DL because you can easily and semantically link multiple items (DD) under the same heading (DT).

Here's the structure:

<div id="sidebar">
<div id="subnav">
<dl>

<dt>The header for the sidebar thing</dt>
<dd>The content of the sidebar thing (Maybe a list, maybe something else, who knows?)</dd>

<dt>The next header for the next sidebar thing</dt>
<dd>A bit of content for the next sidebar thing</dd>
<dd>Another bit of content for the next sidebar thing</dd>

<dt>Number three</dt>
<dd>OK, already, we get the idea</dd>
</dl>
</div>
</div>

Lesson 0: Just because XYZ browser displays it the way that you want it to, that doesn't mean that the code is good. Valid code is the most reliable path to reliable results.

Lesson 1: If an item has an "id" attribute, then that means "This is the ONLY thing on the page with this ID."

Lesson 2: Always use lower-case tags and attributes in XHTML. (Hence, the capitalized P tags are no good.)

Lesson 3: Always close every tag. If a tag doesn't normally "close" (like META, IMG, or BR) then you should use the short-close syntax, like this: <br />. That "/>" says "I'm closing right now." The whitespace before the "/" is important.

Lesson 4: Ps can't contain Ps. A P typically does not contain block-level elements. Block level elements are elements like DIV, P, Hn, etc., that typically have line-breaks before and after them. (Think about it: you're putting a paragraph inside another paragraph - does that make logical sense?)

That means, if you add new stuff to the DL the way that it's already working, instead of breaking the flow, then it'll be fine.

I don't know how much you've changed the skin, so I'll just post instructions assuming that you're using the standard moonrise available on the [url=http://skins.b2evolution.net]skins site[/url].

Open up _main.php, and around line 245, you'll see this:

?>

    
</dl>

Just put your stuff right there, before the end of the DL :) For example, it might look like this when you're done:

?>
<dt>Crab Menu</dt>
<dd>
<ul>
<li>FMR Treat</li>
<li>Red Apples</li>
<li>Green Grapes</li>
<li>Hot Dogs</li>
<li>Oyster Crackers</li>
<li>Club Crackers</li>
<li>Tetramin Fish Flakes</li>
<li>Shrimp Tails</li>
<li>Carrots</li>
<li>Krill</li>
<li>Peanutbutter</li></ul>
</dd>

<dt>Things  that weren't real popular:</dt>
<dd>
<ul>
<li>Coconut</li>
<li>Kiwi</li>
<li>Strawberries</li>
</ul>
</dd>

</dl>

I don't know if these lists are hard-coded XHTML, or if you're using some piece of PHP to generate them (like I do in the skin, for example,) but that's what the output should look like. All lower-cased tags, tacked onto the same DL as everything else, all tags closed, nice and tidy. B)

Ouch! Wow, this is less valid XHTML than I'd thought.

Lesson -1: No content outside the BODY!

No wonder that was messing up. Your crab picture and webring stuff should go AFTER the BODY tag, but before the <div id="wrapper">.

Put back the " /" in the favicon link. It's there for a reason. (See the previous post about closing tags.)

Put a /> in the IMG tag for the crab picture. Also, you must supply an ALT attribute. ('alt="hermit crab picture"' would do the trick.)

Always enclose attribute values in "s. (The webring link is 1990's style tag soup.)

Check this out:
http://www.w3schools.com/xhtml/default.asp

By the way, I don't mean to be beating up on you for having a page that doesn't validate. But you are using one of my designs, and I just don't like seeing my baby treated like that! ;) It seems like a pain at first, but trust me, valid code => easy maintenance & (mostly) cross-browser reliability => happy webmaster.

Please beat me up! I can learn from a good beating LOL

I'm going to try to find a dummies book for CSS because what I've tried to read online is just over my head :oops:

I'm going to try to fix this stuff right now before work because its my last chance till I get back from vacation!

Okay I'm down to TWO errors and I'm not sure where they are or what its telling me:

Below are the results of attempting to parse this document with an SGML parser.

Line 118, column 94: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

...nks to each day's posts" cellspacing=1 cellpadding=0><caption><a href="http:/

✉

Line 118, column 108: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

...y's posts" cellspacing=1 cellpadding=0><caption><a href="http://www.foreverpu

**
I didn't know what those links were at the bottom! Thanks for showing me how to use them!

I'm also missing a block of color now for some reason in Opera????
In IE and Mozilla, my Spay/neuter gif is cut off at the top?

My main blog the www.foreverpurple.com/blog is a MESS. I've tried to fix it but I'm not making any headway. I guess that will have to wait till after vacation.

Line 118, column 94: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

...nks to each day's posts" cellspacing=1 cellpadding=0><caption><a href="http:/

That means: Put your attribute values in double-quotes. The stricter syntax makes it more parse-able by more types of devices (in theory) and also makes your code more readable (in fact.) So, change that to

...nks to each day's posts" cellspacing="1" cellpadding="0"><caption><a href="http:/ 

You should avoid putting any non-semantic style info (like "cellspacing") in the XHTML. However, at this point in history, browser support for Table CSS stuff is pretty weak, so lots of people use cellpadding and cellspacing attribs.

The CSS equivalents are border-collapse and border-spacing properties, which only apply to tables and their children. (Or any element with "display:table" or "display:table-cell".) The CSS properties give you more control, but they're not widely supported yet. (They'd also allow you to display a DIV like a table row or cell, making life super-easy for those who are used to designing with tables!) What's worse, some browsers (ahem-IE) support these properties half-way, leading to odd results.

I put quotes around all that stuff. I'll check it again from this pc.

On my other two blogs alot of the errors are on things I never altered. Should I even attempt to fix all of it since I really don't know how?