CSS: Center a float:left element based on screen width?

Question

I have to use a float div (the main window of my application), and I'd like to center that floated DIV based on the client's screen width. How can I accomplish that?

Right now I'm using a left:20% but that's not always centered depending on the user's screen resolution

Answer 1

You can try to use

.mainWindow {
    margin: 0 auto;
}

then make sure the parent element is text-align: center;

Answer 2

I usually use an auto centered container div and then put any other containers (like your floated div) inside that container. Is there any particular reason you can't do that?

Example CSS:

#container {
width: 960px;
margin: 0 auto;
position: relative;
}