css help

I have been working on a template that is tableless, and I am having trouble with the layout.
Here is the link to the page, and I included the css in the source of the html:

http://aboveboardbookkeepers.com/csslayout/css.htm

Any sugestions to make the layout align right?

Can you sent a jpg/png of the result you want? Do you want this to align in the center of the page. It is not clear from your post what you want to achieve. When you provide more detail we can help.

Cheers,

Jay

here is a link to the site:
http://www.aboveboardbookkeepers.com

And I want the news and info bar on the left, and the body on the right.

The left side is set w/ float:left and the right w/ float:right;
yet they keep ending up in wierd places.
Here is the link to what I want
http://aboveboardbookkeepers.com/csslayout/weblayout.jpg

Thanks

There are a couple of issues causing your problems.

First you have your #left (never good to name divs this way) with a width of 360px and your #right with no width so it will be as wide as the content and its parent (#content [779px]) will allow so you must set a width for the #right.

There are other issues but upon review it would take me too much work to tell you how to fix it all.

Let me just say that you need to cut down all the divs. You don’t need a div for every element or sub element.

If you are going to apply widths to things don’t give widths of floated elements that are greater than their container or you will get wrapping. You will have to apply a width to all divs that have a width. Unlike table cells they won’t grow to fill up the table but move down into relative position. This is why your main content window is shoved to the bottom. It has no width so the browser assumes that it is 100% width and therefore 100% +360px is not 779px.

If this is your first CSS only layout you should look at some sites that use tableless layouts to see how the floats are done. Keep in mind there are a lot of ways to do the same things.

One other thought is for you to make sure that background images should have their repeat value set. Your #news background should have its repeat value set to repeat-y so that it only repeats in one direction (down).

This is a very common layout style. Here is an example of one: http://www.marydixon.com/ (the CSS file is here: http://www.marydixon.com/assets/templates/mdixon/styles/main.css). As you will see there is a floated navigation bar and a content pane. If you look at the source you will also see that there are few divs only those that are necessary. You can use the cascade (the first C in CSS) to assign styles to elements by creating strings such as #news li a{} to apply a style only to links in lists in the #news div.

Hope this helps

Smashingred has explained very well.
You have way to many divs to keep track of what’s going on.
A simple layout is to have something like the following:



Generally it seems easier to work from top to bottom and left to right.
You might need to use the CSS "clear" to get your float left and right to work correctly.

It looks pretty much right in IE7, but everyone will say design in FireFox and then correct for IE!

Thanks