Kathy Lin

Posting to myself so I won’t forget …

body {
text-align: center;
min-width: 600px;
}

#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}

The following comes from Andy Budd’s Website

To centre the div, simply set its width and then use margin auto on the right and left hand sides. Unfortunately this doesn’t work in IE. However luckily for us, IE also misinterprets text-align: center. Applying this to the body centres the div in IE. However it also centres the body text in all the other browsers as well. To get round this you need to use text-align: left; on the div that you’re centering.

This gets IE up to scratch. However this is the step I always forget. In Mozilla, if you reduce the size of the browser window, half of your centred div hangs off the left of the page. This is an odd one, but I’ve been reliably informed that it’s the correct behaviour. To prevent this, just set a min-width on the body tag.

A common problem I’ve run into when dealing with float based CSS layouts is that the float’s container doesn’t stretch to “include” the other two floats. For instance, if a two column layout was done by putting two different div’s in a container the container div wouldn’t stretch to enclose the other two.

Here are some solutions to that problem that describe the problem itself in more detail. I decided to link them in case I forgot about them.

• Clearing Floats without Structural Markup – This uses CSS 2.0 and the :after psuedo-class.
• Clearing Floats – A nice, simple solution that doesn’t require putting that extra empty “clear:both” div tag after the containers that require clearing.