Being a CSS programmer is like being inducted into some kind of dark art. We’re writing code in a separate document that affects how the code in the first document looks on the screen. It literally feels like you’re screwing around in some back room.

It also helps that unless you have a good understanding of the basics of CSS, some shit just doesn’t make sense. And by “doesn’t make sense” I mean, “isn’t intuitive”.

Here are 3 obvious things we all want to do with CSS that, for some reason or another, aren’t obvious at all.

1. Centering Something

How hard can this be, right? There’s a <center> in HTML so there must be a similar thing in CSS right? Something like, position: center, right?

Unfortunately, no. This is the first place that folks learning CSS learn that she is an unforgiving mistress (and she apparently doesn’t speak plain English).

CSS is a bit more structured than that, so it takes a bit of knowledge of how to think about achieving this to make it happen.

You need to do 3* things.

1. Declare a width for the div
2. Set the margin-left to “auto”
3. Set the margin-right to “auto”

Clearly this feels like a hack. But apparently it’s standard protocol. And when you think about it, it makes sense.

The long form of the code is:

width:500px;
margin-left:auto;
margin-right:auto;

Let’s look at this quickly.

Width: If we’re going to center something, we need to know how wide it is, it just makes common sense. Use pixels or percentages.

Margins: By setting the margins to auto, we’re letting them figure out where it should go. And because we’ve declared a width, setting each side to auto, pushes that div into the center, where you want it to be.

There’s a shortcut to save you time on how to write it. Instead of writing two lines of code for the margin, just write “margin: 0 auto;” instead. So the short version would look like this:

width:500px;
margin: 0 auto;

2. How to make a horizontal menu from an unordered list

When you first start with CSS, especially if you’re self-taught, you probably don’t have the first clue on how to create a horizontal menu. Probably make a bunch of images and line them up next to each other, right?

But then you look around and see that people are using lists to accomplish a lot. And it comes down to styling those lists.

And style, you’ve got. You know how to change the color of your fonts, how to remove the underline and that sort of thing. What you need to do is to get an unordered list to list itself horizontally.

The key here is knowing the difference between an “inline” and a “block” element.

Elements can either be “inline” or “block”. A few examples are, <span> is inline – that’s why you can’t move it around the page while <div> is a block element, where you can. A <p> is an inline element while an <h> tag is a block level element.

The secret, in this case, is to make your unordered list a “inline-block” element. This way you’ll turn each <li> into a block but they’ll all be in a horizontal row, like an inline element.

So you’ll have your unordered menu:

<ul id="menu">
 <li>Option 1</li>
 <li>Option 2</li>
 <li>Option 3</li>
 </ul>

And its corresponding CSS. For the purposes of this example, I won’t include any additional design code except to get rid of the bullet point. Because you know that’s your next question. 🙂

#menu ul li {
 list-style-type: none;
 display: inline-block;
 }

3. The Right Way to Move a DIV Around the Page

I got myself into trouble early on by using top and left to move my DIVs around the page. It immediately caused me headaches as I had to write code to compensate for how I was moving the DIVs around on the page. And it made somethings impossible.

Then I found a better way. Use margin-top instead of top and margin-left instead of left. And if using a margin attribute screws things up (which can happen in some nested DIV situations) applying padding instead will do the trick.

As an example, instead of moving your DIV down 20 pixels with the code:

top:20px;

Instead use:

margin-top:20px; (or padding-top:20px; if that fails)

and all will be well.

*The article originally said there are four things to do, but as noted in the comments, this was incorrect. Thanks to Nathan for pointing it out.