I learned HTML in 2000. Since then I have learned XHTML, CSS, FML, some JavaScript, XML, and other languages, as well as various image and animation rendering software. I have launched about six websites since then, but I'm needing some help upgrading/updating to the latest recommendations.

I built my first site using frames, now they are "deprecated." I have tried to move away from them using tables, now they are "deprecated."

Now, I'm trying to launch a new site using only the latest recommendations and I'm having problems.

Although I learned CSS awhile back, it wasn't well supported at the time, so I used it only sparingly. I'm sure everyone here understands the problems related to trying to build a website that renders well on all browsers and screen sizes.

Just to catch up, I just finished a book on the latest recommendations for XHTML and CSS. For the first time, I've really tried to implement CSS to its fullest capacity, something I never really tried before. Although, I've learned how it should work in theory, I've never tried to actually implement it to its greatest extent.

I have a client that has given me a layout for a site that I know how to build the old ways, yet I'm trying to translate that into the newest recommendations.

The site has a banner and navigation links across the top, and two columns underneath. He wants a 1px black border dividing everything up. He also wants the site centered on whatever screen anyone might use.

I tried to construct this site without tables or frames, just using CSS, but ran into some problematic issues with various browsers that I couldn't resolve. Then, I decided that I would use minimal tables and try to do it again, but I'm still having problems.

(When I say I went to minimal tables, I'm saying that I tried to just outline everything with them without specifying anything within them, just <table>, <tr>, <td>, etc. I was hoping that I could define everything else in CSS.)

I tried to layout the site with the block element <div> within the table.

I managed to find a "hack" to solve the issues regarding IE adding onto the width with borders and padding, but I can't seem to cause the border to extend beyond the content of the <div>. I'm also having issues with the background color. I want both columns to match each other as far as the background color and border. I don't want the color to end before the border is drawn, I don't want the border to be drawn before the color ends, and I want both columns to end at the same place regardless of how much content one might have over the other.

This is easily done in tables, but seems to be problematic in CSS (especially with different browsers).

If I specify a width and height to the <div> tag the color goes that far but the border doesn't (the border only goes as far as the content), and the color or the border falls differently in different browsers (possibly because of how each one of them renders the pt and <br /> sizes), thus making whatever defined value of the height for the <div> inadequate.

At this point, I guess I need to explain my "hack" for the border and padding to get the width right in IE.

I didn't include a border or padding in my primary <div> tags for the two columns since they stated a width and height. I created two new <div> tags that didn't state width and height, one for padding and one for the border, and I included them within the primary <div> tags for the two columns. I did this to get around the fact that IE adds padding and border widths. This part works just fine in all browsers.

Maybe what I'm trying to do is impossible. I'm sure it is made more problematic because I want to center the site in every size screen and can't specify absolute positioning with coordinates. I'm just trying to do something that is easily done with tables (or frames).

I don't know if I have explained the situation as clearly as possible, but I hope someone out there knows what I'm talking about.

This is my first time here and I only joined hoping someone had some answers.

Thanks in advance to anyone who bothers to read and respond to this post.

Hey som, I am actually new to the boards, I just signed up about 5 min ago in seek of getting help...so I am a big advocate of if you help others, other will help you ...

Ok, so to let you know I have also just started using CSS/XHTML (table-less) about 3 weeks ago myself and I completly understand the frustration you are having!!!

Your post was a little long and my mind got tossed around and it was hard to follow but I'll help you as much as possible.

To fix your browser issues google: "conditional comments". That should help fix your browser incompatibility problem.

Next, I would suggest browsing popular CSS Gallery websites such as cssremix, and css thesis (google them). Some very talented CSS'ers are featured on there.

Next time post some work so we can see where you are at, it's a little easier to see what you are doing off of that.

Thanks, hope it helped!

Som I understand your frustration, but what you want really can be done with css alone and it can be done easily. Think of it as you would learning any new language. My native language is English. For me it's by far the easiest one to speak, because it's the language I've been speaking all my life. When I need to communicate with someone I can easily find the words to get my message across.

I would have a very difficult time trying to get that same message across in Italian, because other than a few words I've picked up over the years I don't speak the language at all. That same message can easily be communicated in Italian and I'll even say Italian is an easier language to learn than English. Still I'm going to have a hard time communicating in Italian until I learn the language.

Take a look at Simple 2 column CSS layout | 456 Berea Street Based on your description it sounds like just what you're trying to do. The only difference is the link above also includes a footer, which you didn't mention.

Here's what the layout looks like if you want to see before reading through the article. Hopefully it helps.

Try coding your site based on the one in the link above and if you have any problems with it post back here and we'll see if we can help work out the bugs.