Hi, my name is Jim and I’m a CSS’oholic.

I remember my first floated div. It was heaven. Soon I escalated to CSS rollovers buttons and list-based menus. I was on top of the world!

And then, the downward spiral began. Before I realized what was happening, I found myself watching the sun come up over the lonely back alleys off the information superhighway as I hunted for one more CSS fix that would finally get my pixels aligned.

And then a friend took me to a CSS Anonymous meeting. I was skeptical at first but, thanks, to CA I’m on the road to recovery. Sure, I still face the occasional dawn with a mouse in one hand and an empty can of Red Bull in the other. I know I’ll always be a CSS’oholic but with the help of the 12 Step CSS Anonymous program at least I’m getting more sleep.

12 Steps to Conquering CSS’aholism

When faced with an impossible deadline and uncooperative CSS.

1. Just say “NO!”  Why waste time making your page look perfect in Explorer 6? If the user cared what your pages look like, he wouldn’t be using IE6.  
2. Back up: Now. And now! And NOW! When you stretch the limits of your CSS knowledge, the code will probably break before you do. When that happens a backup means you’ve only wasted time not trashed your site.
3. Search: OK, I know Google is probably the first place you turn when faced with a CSS issue but do you use it effectively? Here are few suggestions:
   • Construct your query carefully: You’ll get better results and the very process of refining your query may lead to the solution.
   • Focus on newer results: Web design has come along way in a very short time. By limiting your results to the last year you can eliminate a lot of once good advice that’s gone bad.
   • Bookmark sites that come up regularly: There’s a reason you keep stumbling across sites like W3.org and W3schools.com.
4. Exploit forums: Online forums are full of CSS enablers. I try to be active in forums where the people are knowledgeable and help and usually, when I need help, it’s offered.
5. Tweet: It seems crazy to think you can get the answer to a complex question in the 140 characters Twitter allows but:
   • Distilling your issue into a question of 140 characters helps you focus on the real problem.
   • You don’t need THE answer; you just need the idea that leads to it.
     Of course, if you’re not active on Twitter, when you desperately need help probably isn’t the time to get started.
6. Take a time out: What works for kids, works for adults. A brief break can help you approach the problem from a fresh perspective.
7. Compare your code to code that works: If you’re customizing standard code (like Dreamweaver’s built-in Spry) invest in software such as BBedit (Mac) or TextWrangler (PC) that allows you to compare your copy of a document to a virgin, working copy. Then you’ll only need to worry about the code you know has changed.
8. Get the big picture: Does your issue occur on one page or many?
   • If your pages share a fixed structure and only one page is broken, the problem is probably in the unique content of that page.
   • If the problem occurs throughout your site or in a particular section of your site then focus on the elements that are common to those pages.
9. Narrow your focus:
   • Where’s the break? If everything after X is whacky, the problem probably occurs at or before X.
   • Which browser(s): Does the problem occur in one browser (think Internet Explorer) or multiple browsers? Since each browser has its own quirks, pinpointing the problem browser can help you locate a solution.
   • Validate: I’ve got nothing against a bit of invalid HTML or CSS if things still work but a validator can quickly locate unclosed tags, syntax issues and other potential problems.
10. Start over: It’s tough to abandon several hours of work and start over or revert to a backup but, if you’ve spent several hours trying to solve a problem and haven’t, then you’ve probably spent those hours making it worse. The second time through the process you’ll know the issue (if not the solution) and, by working methodically and checking for the problem after each step, you’ll be able to pinpoint the problem if it happens again.
11. Break something else: Sometimes it’s simpler just to accept that you can’t fix every issue and adapt your design accordingly. For instance, if you can’t get rid of a pesky border on the left, try adding one on the right.
12. Write it down: When you learn a new bit of code, develop a new technique or discover a new resource, write it down. That way, the next time you fall off the CSS wagon at least at least the answer will be close at hand.

Update: The directions here have been updated to accomodate absolutely positioned divs. Thanks to Dianne Lewandowski for pointing out the issue. You can also view my video on Centering a CSS web page layout…

I thought I'd expand a bit on my answer to a question from Brandon85 on Twitter. He asked:

Why is this so hard!! How do you Center a website in the browser using Dreamweaver?

Actually, it's relatively easy (if you know how).

1. Begin by selecting your entire page in Design View.
2. Select menu: Insert>Layout Objects>Div Tag (or click on Insert Div Tag in the Common tab of the Insert Palette).
3. In the Insert Div Tag dialog:
   1. Select Wrap Around Selection (your entire design) from the Insert menu.
   2. Leave the Class field empty
   3. Type "wrapper" (without the quotes) into the ID field (this is assuming you don't already have an item with the ID "wrapper."
   4. Click the New CSS Rule button.
4. In the New CSS rule dialog
   1. ID should already be selected in the Selector Type menu.
   2. #wrapper should have been automatically inserted into the Selector Name field.
   3. Decide whether the new style should be in the current document or a new or existing style sheet and make your selection in the Rule Definition menu .
   4. Click the OK button.
5. In the CSS Rule Definition dialog:
   1. Select the Box category.
      1. Type in a Width. By default the horizontal width of a div is 100% so you need to set a width for the wrapper div to properly center it. Logically this should be the width (most likely in pixels) of your page design.
      2. Uncheck the Same for All option under Margin.
      3. Set the Right margin to auto by selecting auto in the pop-up menu to the right of the Right field.
      4. Set the Left margin to auto using the same method.
   2. Select the Block category
      1. Select left from the Text-Align menu (I'll tell you why in a moment).
   3. Select the Positioning category
      1. Select relative from the Position menu. This forces any absolutely positioned divs in your page to align relative to the "wrapper" div rather than the browser window. See CSS positioning for more information on positioning.
   4. Click OK

Your design should now be centered but we still have one step to go.

Correction: The following work-around was originally mislabeled. It is intended for IE5 compatibility (and can probably be ignored by most folks)

Work-Around for Internet Explorer 5: If desired, we'll need an additional fix to make this IE5 friendly.

1. Set the text-align property of the body style to center (This will center your page layout in IE5)
   1. If you already have a body style, double click on it in the Styles Palette to open the CSS Style Definition dialog.
   2. If you don't have a body style, create a new one:
      1. Choose menu: Format>CSS Styles>New… (or select New… from the pop-up menu in the upper-right corner of the Styles Palette) OR
      2. In the New CSS Rule dialog:
         1. Choose Tag from the Selector Type menu.
         2. Type "body" into the Selector Name field.
         3. Decide whether the new style should be in the current document or a new or existing style sheet and make your selection in the Rule Definition menu .
         4. Click the OK button to open the CSS Style Definition dialog.
   3. In the CSS Style Definition dialog:
      1. Select the Box category.
      2. Select center from the Text-Align menu.
      3. Click OK

That explanation I promised: Setting the text-align property in the body style to center centers your page design but, since styles are inherited in CSS, it also centers all the text on your page. By setting text-align for #wrapper to left, we effectively overrule the centering for all page elements inside of #wrapper (which should be all of the page elements).

Funny how much a 140 character answer on Twitter can grow once it's a blog post!

As always, feel free to email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

Question from @discuit via Twitter: A coder we use has coded the site in Absoloute DIVs, and now we can't select any text in Design view. Any idea how to fix it?

Answer: Discuit, hover your cursor over the border of the div you want to edit (even one underneath another layer) until it highlights. Then click on border to select div. Now you can click inside the div and edit as usual.

Alternatively, you can also set the CSS visibility property to hidden for the top div in order to access the underlying div for editing. Just make sure you change it back!

Update: And, of course, I overlooked the obvious. Simply select the div you want to edit in Dreamweaver's AP Elements tab. Once the div is selected,  you can click inside the div and edit as usual.

Follow me on Twitter: @DWcourse