Centering Three Div Tags Inside Of A Div

I have a container div and would like to place three div tags within the center div, I have the XHTML correct, but what I am having trouble in is, well, centering the three divs within the div.

I will now show the code.

XHTML 1.0 Transitional (HTML)

<div id="container">  
<div id="header">
</div>
<div id="content">
  <div id="contentbox">
  </div>
    <div id="contentbox">
  </div>
    <div id="contentbox">
  </div>
</div> 
</div>

Cascading Style Sheet (CSS)

#container {
  width: 900px;
  height: inherit;
  margin: 30px auto;
}

#content {
  float: center;
  width: inherit;
  height: inherit;
 开发者_运维百科 margin-left: auto;
  margin-right: auto;
  position: absolute;
}

#header {
  margin: 0 auto;
  background-image: url(images/logo.png);
  background-position: center;
  width: 250px;
  height: 250px;
}

#contentbox {
  margin-left: auto;
  margin-right: auto;
  float: left;
  display: block;
  width: 250px;
  height: 250px;
  background-image: url(images/contentbox.png);
}

To see an example of what I am trying to do, please visit http://www.noxinnovations.com/portfolio/hfc/

I want to know how to center those three content boxes within the content div.

Thank you very much, Aaron Brewer

Check if this is what you want :

http://jsfiddle.net/65WHf/1/

Note that ID's are supposed to be unique, and there's no such thing as center floating. To center a div, you must ensure it's positioned relativelly to it's container (wich is the default behaviour of most browsers of my knowledge) and make use of the followinf syntax :

.something {
  margin: 0 auto;
  clear: both; // instead of float
}

Hey, float: center; won't work. There's no such value for the float property.

use this instead for the #content css

text-align: center;

hope that helps.

You could always do something like this:

HTML:

<div id="container">  
    <div id="header"></div>
    <div id="content">
        <div class="contentbox"></div>
        <div class="contentbox"></div>
        <div class="contentbox"></div>
    </div> 
</div>

CSS:

.contentbox {
      margin-left: auto;
      margin-right: auto;
      float: left;
      display: block;
      width: 250px;
      height: 250px;
      border: 1px dashed #999;  /* just for visuals */
      margin: 0 10px;  /* just for visuals */
}

You definitely want to stay away from IDs as a general practice, do you can use them with javascript (jquery, etc) libraries. Plus it's cleaner that way.