Help with my formatting Options

[cssaddict]

OK, so I've been working on a new site for my employer and I'm having a little trouble.

Here's the link: mrswaldrop.com/temp.htm

Okay, first, I'm trying to replace the rotator (that's not working). A friend of mine was helping me with it, but I've been having trouble with it as of late and I can't seem to get a hold of home. So anyway, I'm trying to replace it with the one at http://jquery.malsup.com/cycle/basic.html

But every time I do, it screws up all my formatting.

2. I want the sidebar to be where it's at, but I want it to start at the top of the page. For some reason it's starting down the page. I've messed with the padding on the main content and width, but nothing is helping.

3. I want the News and Events Part to start directly below the rotator. Right now is down the page.

I should add, I ran the HTML and CSS through a validator. The HTML had some errors, however, most were a couple of widgets I added from a company's website that provides resources for my company. I'm getting with them tomorrow about the errors.

[Darin McGrew]

2. I want the sidebar to be where it's at, but I want it to start at the top of the page. For some reason it's starting down the page. I've messed with the padding on the main content and width, but nothing is helping.

You've floated div#sidebar right. That won't move it up on the page; it just floats it to the right from where it would normally appear. If you want to move it up, then you need to move the markup earlier in the page, or you need to float the earlier content so the normal position of div#sidebar is higher on the page.

3. I want the News and Events Part to start directly below the rotator. Right now is down the page.

You've sized and floated div#main left. That creates a rectangle 550px wide that the other content avoids. Then

CODE

<h2>Texas Gubernatorial Debates</h2>

is 650px wide, but the left 550px is blocked by the floated div#main, leaving only 100px for the content between div#main on the left and div#sidebar on the right. That forces "Gubernatorial Debates" below div#sidebar.

I find it very helpful to use the Inspect Element feature of Chrome, but you can use background colors to see where the different elements really are.

[cssaddict]

2. I want the sidebar to be where it's at, but I want it to start at the top of the page. For some reason it's starting down the page. I've messed with the padding on the main content and width, but nothing is helping.

You've floated div#sidebar right. That won't move it up on the page; it just floats it to the right from where it would normally appear. If you want to move it up, then you need to move the markup earlier in the page, or you need to float the earlier content so the normal position of div#sidebar is higher on the page.

3. I want the News and Events Part to start directly below the rotator. Right now is down the page.

You've sized and floated div#main left. That creates a rectangle 550px wide that the other content avoids. Then

CODE

<h2>Texas Gubernatorial Debates</h2>

is 650px wide, but the left 550px is blocked by the floated div#main, leaving only 100px for the content between div#main on the left and div#sidebar on the right. That forces "Gubernatorial Debates" below div#sidebar.

I find it very helpful to use the Inspect Element feature of Chrome, but you can use background colors to see where the different elements really are.

When I moved the #sidebar above the #main div, it still pushed everything down. When I take off the floats, it moved the side bar up, but the sidebar there is space between the sidebar and the edge of the container. I changed all the width to 550px, but the Debate and everything is still below the sidebar. Ugh, I love CSS and HTML, but it sure is frustrating sometimes. Obviously, I have a lot to learn. Thanks for your help.