Side Column Dropping Below My Main Content Area

Hi,

You have a CSS problem, then, I guess:)

Usually a column drops below another, when there is not enough space for it on the horizontal, so it goes below the other.

Say you have a page layout with a main wrapper DIV with a width of 760px. Then you have main content DIV, with 500px width, and (let’s suppose) floating sidebar DIV with 165px width. The sidebar will then probably drop below your main div, because 500+165=765 and there’ll be not enough space for it.

So this could be a problem with the CSS (or html) of the theme you use.

But it also could be a variety of other options. Maybe you have modified it in a certain way, so it doesn’t display correctly now? Maybe you have added some small piece of content somewhere, which breakes the css layout?

If you use a pre-made theme, first test without anything added. Try the theme as-is, if it works, then you have have made somewhere a mistake in the code of the page, while editing it.

Also, test the site using the W3C validator!

I see there are wrongly nested tags there! (or unclosed ones) (or both;-)

Check everything, fix, experiment, and you most certainly will come to the point when the mistype will present itself to you:)))

Good luck!;-)

When I was a kid 500 + 165 was 665. Call me old fashioned……

600+165, sorry :)))))

I guess, didn’t yet drink enough coffee this morning ??

Let’s also not forget that IE has the lovely “3 pixel bug” that it adds to floated elements (like your sidebar, most likely). So adjust your addition for that, because in IE, 600+165=768! (And don’t forget padding issues either – IE’s fun to work with ;))

Of course… ??

But as I checked the W3C Validator, I believe there are some serious nesting issues and/or incorreclty closed elements… So remains for Mestew just to find where the incorrect piece of html is:)